

<!DOCTYPE html>
<html lang="zh-CN" data-default-color-scheme=&#34;auto&#34;>



<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/blog/img/favicon.png">
  <link rel="icon" href="/blog/img/favicon.jpg">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  <meta name="theme-color" content="#2f4154">
  <meta name="description" content="">
  <meta name="author" content="John Doe">
  <meta name="keywords" content="">
  
  <title>JavaScript笔记-DOM - ITaylorfan的小站</title>

  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" />


  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@4.0.0/github-markdown.min.css" />
  <link  rel="stylesheet" href="/blog/lib/hint/hint.min.css" />

  
    
    
      
      <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@10.7.2/styles/github-gist.min.css" />
    
  

  
    <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
  



<!-- 主题依赖的图标库，不要自行修改 -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_ba1fz6golrf.css">



<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_kmeydafke9r.css">


<link  rel="stylesheet" href="/blog/css/main.css" />

<!-- 自定义样式保持在最底部 -->


  <script id="fluid-configs">
    var Fluid = window.Fluid || {};
    var CONFIG = {"hostname":"itaylorfan.gitee.io","root":"/blog/","version":"1.8.11","typing":{"enable":true,"typeSpeed":70,"cursorChar":"❤","loop":false},"anchorjs":{"enable":true,"element":"h1,h2,h3,h4,h5,h6","placement":"right","visible":"hover","icon":""},"progressbar":{"enable":true,"height_px":3,"color":"#29d","options":{"showSpinner":false,"trickleSpeed":100}},"copy_btn":true,"image_zoom":{"enable":true,"img_url_replace":["",""]},"toc":{"enable":true,"headingSelector":"h1,h2,h3,h4,h5,h6","collapseDepth":0},"lazyload":{"enable":true,"loading_img":"/img/loading.gif","onlypost":false,"offset_factor":2},"web_analytics":{"enable":false,"baidu":null,"google":null,"gtag":null,"tencent":{"sid":null,"cid":null},"woyaola":null,"cnzz":null,"leancloud":{"app_id":null,"app_key":null,"server_url":null}},"search_path":"/local-search.xml"};
  </script>
  <script  src="/blog/js/utils.js" ></script>
  <script  src="/blog/js/color-schema.js" ></script>
<meta name="generator" content="Hexo 5.4.0"></head>


<body>
  <header style="height: 85vh;">
    <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand"
       href="/blog/">&nbsp;<strong>ITaylorfan</strong>&nbsp;</a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/">
                <i class="iconfont icon-home-fill"></i>
                首页
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/archives/">
                <i class="iconfont icon-archive-fill"></i>
                归档
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/categories/">
                <i class="iconfont icon-category-fill"></i>
                分类
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/tags/">
                <i class="iconfont icon-tags-fill"></i>
                标签
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/about/">
                <i class="iconfont icon-user-fill"></i>
                关于
              </a>
            </li>
          
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" target="_self" data-toggle="modal" data-target="#modalSearch">&nbsp;<i
                class="iconfont icon-search"></i>&nbsp;</a>
          </li>
        
        
          <li class="nav-item" id="color-toggle-btn">
            <a class="nav-link" target="_self">&nbsp;<i
                class="iconfont icon-dark" id="color-toggle-icon"></i>&nbsp;</a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

    <div class="banner" id="banner" parallax=true
         style="background: url('/blog/img/TS8-10-9.jpg') no-repeat center center;
           background-size: cover;">
      <div class="full-bg-img">
        <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
          <div class="page-header text-center fade-in-up">
            <span class="h2" id="subtitle" title="JavaScript笔记-DOM">
              
            </span>

            
              <div class="mt-3">
  
  
    <span class="post-meta">
      <i class="iconfont icon-date-fill" aria-hidden="true"></i>
      <time datetime="2021-09-27 19:29" pubdate>
        2021年9月27日 晚上
      </time>
    </span>
  
</div>

<div class="mt-1">
  
    
    <span class="post-meta mr-2">
      <i class="iconfont icon-chart"></i>
      13k 字
    </span>
  

  
    
    <span class="post-meta mr-2">
      <i class="iconfont icon-clock-fill"></i>
      
      
      172
       分钟
    </span>
  

  
  
</div>

            
          </div>

          
            <div class="scroll-down-bar">
              <i class="iconfont icon-arrowdown"></i>
            </div>
          
        </div>
      </div>
    </div>
  </header>

  <main>
    
      

<div class="container-fluid nopadding-x">
  <div class="row nomargin-x">
    <div class="d-none d-lg-block col-lg-2"></div>
    <div class="col-lg-8 nopadding-x-md">
      <div class="container nopadding-x-md" id="board-ctn">
        <div class="py-5" id="board">
          <article class="post-content mx-auto">
            <!-- SEO header -->
            <h1 style="display: none">JavaScript笔记-DOM</h1>
            
            <div class="markdown-body">
              <h1 id="JavaScript-DOM"><a href="#JavaScript-DOM" class="headerlink" title="JavaScript-DOM"></a>JavaScript-DOM</h1><p>JavaScript是由三部分构成</p>
<pre><code class=" mermaid">graph TD
A[JavaScript]--&gt;B[ECMAScript]
A--&gt;C[DOM]
A--&gt;D[BOM]
</code></pre>

<p>DOM的全称<code>document object model</code>，文档对象模型，它是我们的<strong>JS与网页的结合技术</strong>，把网页像对象一样进行操作</p>
<p>JS与网页的结合主要分为两个部分的技术</p>
<ol>
<li>JS与HTML的结合</li>
<li>JS与CSS的结合</li>
</ol>
<h2 id="1-DOM基础"><a href="#1-DOM基础" class="headerlink" title="1. DOM基础"></a>1. DOM基础</h2><h3 id="1-获取页面元素"><a href="#1-获取页面元素" class="headerlink" title="1.获取页面元素"></a>1.获取页面元素</h3><ol>
<li><p>通过ID去获取</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&quot;ID名&quot;</span>):Element<br></code></pre></td></tr></table></figure>

<ul>
<li>如果没有找到这个元素，就返回<code>null</code></li>
<li>如果找到的元素就回返一个元素（<strong>即使ID名相同找到多个，也永远只返回第一个</strong>）</li>
</ul>
</li>
<li><p>通过class名去获取</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-built_in">document</span>.getElementsByClassName(<span class="hljs-string">&quot;class名称&quot;</span>):HTMLCollection<br></code></pre></td></tr></table></figure>

<p>这一种方式通过class名称去获取一个集合，这个集合里面包含的就是符合要求的元素，如果一个都获取不到，它就是一个空集合（它返回的集合是一个<code>HTMLCollection</code>，它是一<strong>类数组</strong>）</p>
</li>
<li><p>通过标签名去获取</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-built_in">document</span>.getElementsByTagName(<span class="hljs-string">&quot;标签名&quot;</span>):HTMLCollection<br></code></pre></td></tr></table></figure>
</li>
<li><p>通过name属性去获取</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-built_in">document</span>.getElementsByName(<span class="hljs-string">&quot;name名称&quot;</span>):NodeList<br></code></pre></td></tr></table></figure>

<p>请注意，这个地方返回的是一个<code>NodeList</code>的类型，它与我们之前的<code>HTMLCollection</code>非常相似，把符合要求的元素放在这个集合里面，如果一个都获取不到就是空的集合（它也是一个类数组）</p>
<blockquote>
<p>HTMLCollection是动态结构，而NodeList是静态结构</p>
</blockquote>
</li>
</ol>
<p>上面的四个方法是之前获取DOM元素最基本的四个方法，比较简单，但同时效率也比较低，例如下面的代码</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第1项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第2项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第3项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">ol</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第4项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第5项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第6项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">ol</span>&gt;</span><br></code></pre></td></tr></table></figure>

<ul>
<li>如果我们想获取<code>ol</code>里面的<code>li</code>怎么办</li>
<li>我们想获取<code>ul</code>里面的奇数项<code>li</code>怎么办</li>
</ul>
<p>针对上面的问题，JS借鉴了之前CSS中的选择器的概念，衍生出了2个新的方法</p>
<ol start="5">
<li><p>通过CSS选择器获取单个元素</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;CSS选择器&quot;</span>):Element<br><span class="hljs-comment">//如下</span><br><span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;#div1&quot;</span>);<br></code></pre></td></tr></table></figure>

<ul>
<li>如果找到的元素就回返一个元素</li>
<li>如果找不到元素就返回<code>null</code></li>
<li>如果找到多个就只返回第一个</li>
</ul>
</li>
<li><p>通过CSS选择器获取元素集合</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-built_in">document</span>.querySelectorAll(<span class="hljs-string">&quot;CSS选择器&quot;</span>): NodeList<br><span class="hljs-comment">//如下</span><br><span class="hljs-built_in">document</span>.querySelectorAll(<span class="hljs-string">&quot;#div1&quot;</span>);<br></code></pre></td></tr></table></figure>

<ul>
<li>它返回的是一个<code>NodeList</code></li>
<li>它把符合选择器要求的元素放在这个集合里面</li>
<li>如果没有找到符合要求的元素，它就是一个空集合</li>
</ul>
</li>
</ol>
<p><img src="https://pic.imgdb.cn/item/6132b9d144eaada739fd4f34.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210903194231046"></p>
<p>有了上面的2个新方法以后，我们再去解决之前的问题就快很多了</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第1项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第2项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第3项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">ol</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第4项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第5项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第6项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">ol</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-comment">/*</span></span><br><span class="hljs-comment"><span class="javascript">         * 如果我们想获取`ol`里面的`li`怎么办</span></span><br><span class="hljs-comment"><span class="javascript">         * 我们想获取`ul`里面的奇数项`li`怎么办</span></span><br><span class="hljs-comment"><span class="javascript">    */</span></span><br><span class="javascript">    <span class="hljs-keyword">var</span> list1 = <span class="hljs-built_in">document</span>.querySelectorAll(<span class="hljs-string">&quot;ol&gt;li&quot;</span>);</span><br><span class="javascript">    <span class="hljs-keyword">var</span> list2 = <span class="hljs-built_in">document</span>.querySelectorAll(<span class="hljs-string">&quot;ul&gt;li:nth-child(2n+1)&quot;</span>);</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h3 id="2-元素选取扩展"><a href="#2-元素选取扩展" class="headerlink" title="2.元素选取扩展"></a>2.元素选取扩展</h3><p>通过<code>document.querySelectorAll</code>这一个方法，我们在后期的时候可以反推出<code>jQuery</code>框架的部分</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">$</span>(<span class="hljs-params">selector</span>)</span>&#123;<br>    <span class="hljs-keyword">var</span> eles = <span class="hljs-built_in">document</span>.querySelectorAll(selector);<br>    <span class="hljs-keyword">return</span> eles;<br>&#125;<br><br><span class="hljs-keyword">var</span> list1 = $(<span class="hljs-string">&quot;ol&gt;li&quot;</span>);<br><br>NodeList.prototype.click = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">callBack</span>) </span>&#123;<br>    <span class="hljs-built_in">this</span>.forEach(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">item, index, _arr</span>) </span>&#123;<br>        item.addEventListener(<span class="hljs-string">&quot;click&quot;</span>, callBack);<br>    &#125;)<br>&#125;<br><br>$(<span class="hljs-string">&quot;ul&gt;li&quot;</span>).click(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>&#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;标哥哥在等你学好&quot;</span> + <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>().toLocaleString());<br>&#125;)<br></code></pre></td></tr></table></figure>

<h3 id="3-DOM的层次结构"><a href="#3-DOM的层次结构" class="headerlink" title="3.DOM的层次结构"></a>3.DOM的层次结构</h3><p>我们已经可以通过上面的方法来获取DOM元素了，我们获取DOM元素最终的目的是为了操作这些元素，但这些元素有许多方法和属性是不一样，我们应该怎么学习了，现在我们先列举出几个常用元素的层次结构，再去分析</p>
<p><img src="https://pic.imgdb.cn/item/6132ba6b44eaada739fe134c.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210903203211114"></p>
<p>经过对比，我们发现，所以的元素都应该是有5层，页面上面所有的标签都是元素，所以我们应该是从**第三层的<code>Element</code>**开始学习，我们只要掌握了元素的方法与属性，那么网页上面大部分标签大部分的方法与属性就完成了</p>
<h3 id="4-Element常用属性"><a href="#4-Element常用属性" class="headerlink" title="4.Element常用属性"></a>4.Element常用属性</h3><ol>
<li><p><code>children</code>属性，获取当前元素所有的<strong>子级</strong>元素，它反回一个<code>HTMLCollection</code>集合</p>
</li>
<li><p><code>parentElement</code>属性，获取当前元素的父级元素</p>
</li>
<li><p><code>nextElementSibling</code>属性，获取当前元素的下一个兄弟元素</p>
</li>
<li><p><code>previousElementSibling</code>属性，获取当前元素的前一个兄弟元素</p>
</li>
<li><p><code>firstElementChild</code>属性，获取当前元素的第一个子元素</p>
</li>
<li><p><code>lastElementChild</code>属性，获取当前元素的最后一个子元素</p>
</li>
<li><p><code>innerHTML</code>设置或获取当前元素里面的HTML字符串（它可以获取或设置HTML标签，也可以设置文字）</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs javascript">div1.innerHTML = <span class="hljs-string">&quot;&lt;h2&gt;这是一个2号标题&lt;/h2&gt;&quot;</span>;<br>div1.innerHTML = <span class="hljs-string">&quot;标哥是一个大帅哥&quot;</span>;<br></code></pre></td></tr></table></figure>
</li>
<li><p><code>innerText</code>设置或获取当前元素里面的文本内容（它只可以获取或设置到文本，不能获取或设置标签）</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs javascript">div1.innerText = <span class="hljs-string">&quot;标哥还是个大帅哥&quot;</span>;<br>div1.innerText = <span class="hljs-string">&quot;&lt;h2&gt;这是一个2号标题&lt;/h2&gt;&quot;</span>;		<span class="hljs-comment">//它并不能在页面上面转换成2号标题，它会以文本显示</span><br></code></pre></td></tr></table></figure>
</li>
<li><p><code>outerHTML</code>获取<strong>自己的标签和自己内部</strong>的标签及文本</p>
</li>
<li><p><code>tagName</code>返回当前元素的标签名，它是大写字母(eg:DIV)</p>
</li>
<li><p><code>childElementCount</code>获取当前子元素的个数，它与<code>children.length</code>是相同的</p>
</li>
<li><p><code>value</code>属性用于获取或设置表单元素的值</p>
</li>
<li><p><code>className</code>获取或设置当前元素的<code>class</code>属性名称</p>
<p>通过class的名称我们可以动态的改变元素的样式</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"></span><br><span class="css">    <span class="hljs-selector-class">.a</span> &#123;</span><br><span class="css">        <span class="hljs-attribute">width</span>: <span class="hljs-number">200px</span>;</span><br><span class="css">        <span class="hljs-attribute">height</span>: <span class="hljs-number">200px</span>;</span><br><span class="css">        <span class="hljs-attribute">background-color</span>: deeppink;</span><br><span class="css">    &#125;</span><br><span class="css">    <span class="hljs-selector-class">.b</span>&#123;</span><br><span class="css">        <span class="hljs-attribute">font-weight</span>: bold;</span><br><span class="css">        <span class="hljs-attribute">font-size</span>: <span class="hljs-number">32px</span>;</span><br><span class="css">        <span class="hljs-attribute">border</span>: <span class="hljs-number">10px</span> solid lightseagreen;</span><br><span class="css">    &#125;</span><br><span class="css">    <span class="hljs-selector-class">.c</span>&#123;</span><br><span class="css">        <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">50%</span>;</span><br><span class="css">    &#125;</span><br><span class="css"></span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;div1&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;a b&quot;</span>&gt;</span>这是一个盒子<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">var</span> div1 = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;#div1&quot;</span>);</span><br><span class="javascript">    <span class="hljs-comment">//div1.className	</span></span><br><span class="javascript">    div1.className = <span class="hljs-string">&quot;a b c&quot;</span>;</span><br><span class="javascript">    div1.className = <span class="hljs-string">&quot;b c&quot;</span>;</span><br><span class="javascript">    div1.className = <span class="hljs-string">&quot;a c&quot;</span>;</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>我们通过<code>className</code>可以操作这个元素的样式，但是当类名比较多时就比较麻烦</p>
</li>
<li><p><code>classList</code>返回当前元素的<code>class</code>名称列表，它是一个<code>DOMTokenList</code>类型，它是一个类数组，我们会通过这个一方法来操作元素的class列表</p>
<ul>
<li><code>add()</code>添加一个class样式名称</li>
<li><code>remove()</code>删除一个class样式名称</li>
<li><code>contains()</code>是否包含一个class样式名称，包含就是true,不包含就是false</li>
<li><code>toggle()</code>切换，如果原来有这个样式就删除，原来没有这个样式就添加</li>
</ul>
</li>
</ol>
<h3 id="5-Element常用方法"><a href="#5-Element常用方法" class="headerlink" title="5.Element常用方法"></a>5.Element常用方法</h3><ol>
<li><p><code>document.createElement()</code>根据一个标签名来创建元素</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> ele = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">&quot;h2&quot;</span>);  <span class="hljs-comment">//这里创建一个h2标签的元素</span><br>ele.innerText = <span class="hljs-string">&quot;我是一个2号标题&quot;</span>;<br></code></pre></td></tr></table></figure>
</li>
<li><p><code>appendChild()</code>向某一个元素内部最后追加一个子元素，但是<strong>一个子元素只允许被一个元素追加</strong></p>
</li>
<li><p><code>removeChild()</code>删除某一个子元素</p>
</li>
<li><p><code>remove()</code>删除自身</p>
</li>
<li><p><code>insertAdjacentElement</code>在某一个特定位置插入元素，它的语法格式如下</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript">元素.insertAdjacentElement(<span class="hljs-string">&quot;位置&quot;</span>,要插入的元素);<br></code></pre></td></tr></table></figure>

<p>这里的位置是最重要的，它有固定的四个值(开始标签、结束标签以调用的那个元素为基准)</p>
<table>
<thead>
<tr>
<th>单词</th>
<th>位置说明</th>
</tr>
</thead>
<tbody><tr>
<td><code>afterBegin</code></td>
<td>开始标签之后</td>
</tr>
<tr>
<td><code>beforeBegin</code></td>
<td>开始标签之前</td>
</tr>
<tr>
<td><code>beforeEnd</code></td>
<td>结束标签之前</td>
</tr>
<tr>
<td><code>afterEnd</code></td>
<td>结束标签之后</td>
</tr>
</tbody></table>
</li>
<li><p><code>insertAdjacentHTML</code>，在某一个特定的位置插入HTML标签字符串，它的语法与上面的相似</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript">元素.insertAdjacentHTML(<span class="hljs-string">&quot;位置&quot;</span>,<span class="hljs-string">&quot;HTML字符串&quot;</span>);<br></code></pre></td></tr></table></figure>

<p>案例如下</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> ul1 = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;.ul1&quot;</span>);<br><span class="hljs-comment">/*</span><br><span class="hljs-comment">    var newLi = document.createElement(&quot;li&quot;);   //它是一个元素，更是一个对象</span><br><span class="hljs-comment">    newLi.innerText = &quot;标哥哥&quot;;</span><br><span class="hljs-comment">*/</span><br><span class="hljs-keyword">var</span> str = <span class="hljs-string">&quot;&lt;li&gt;标哥哥&lt;/li&gt;&quot;</span>; <span class="hljs-comment">//它是一个字符串 不是元素了</span><br><span class="hljs-comment">// ul1.insertAdjacentElement(&quot;afterbegin&quot;,str);  错误的，它是HTML标签字符串</span><br>ul1.insertAdjacentHTML(<span class="hljs-string">&quot;afterbegin&quot;</span>, str);<br></code></pre></td></tr></table></figure>
</li>
<li><p><code>insertAdjacentText</code>，在某一个特定的位置插入文本字符串，它的语法与上面的相似</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript">元素.insertAdjacentText(<span class="hljs-string">&quot;位置&quot;</span>,<span class="hljs-string">&quot;文本字符串&quot;</span>);<br></code></pre></td></tr></table></figure>

<p>使用这个方法即使插入的是HTML标签字符串，在页上面仍然以字符串显示 ，不会进行HTML转义（也就是不会生成HTML元素）</p>
</li>
<li><p><code>cloneNode(deep?:boolean)</code>，根据一个元素再去克隆一个出来 ，如果需要克隆子元素则添加参数<code>true</code></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> ele = newli.cloneNode(<span class="hljs-literal">true</span>);			<span class="hljs-comment">//添加了参数true代表要克隆子元素</span><br></code></pre></td></tr></table></figure>
</li>
<li><p><code>getAttribute(&quot;属性名&quot;)</code>获取HTML元素上面某一个属性的属性值<span style="color:red">【重点】</span></p>
</li>
<li><p><code>setAttribute(&quot;属性名&quot;,&quot;属性值&quot;)</code>在HTML元素上面设置某一个属性的属性值</p>
</li>
<li><p><code>removeAttribute(&quot;属性名&quot;)</code>删除HTML里面的某一个属性</p>
<p>注意：在操作单属性，如<code>readonly,checked,disabled</code>等属性的时候，单属性的值只有<code>true/false且&quot;false&quot;布尔类型为true</code></p>
</li>
</ol>
<h3 id="6-Property与Attribute的区别"><a href="#6-Property与Attribute的区别" class="headerlink" title="6.Property与Attribute的区别"></a>6.Property与Attribute的区别</h3><p>在之前的时候，我们在使用对象去调用属性的时候有以下几种方式</p>
   <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs javascript">对象.属性;					<span class="hljs-comment">//第一种</span><br>对象[<span class="hljs-string">&quot;属性&quot;</span>];				<span class="hljs-comment">//第二种</span><br></code></pre></td></tr></table></figure>

<p>   虽然说DOM也是一个对象，但是它是一个特殊的对象，它有两种类型的属性</p>
   <pre><code class=" mermaid">graph LR
A[DOM的属性]--&gt;|第一种|B[Property]--&gt;|针对|B1[对象]
A--&gt;|第二种|C[Attribute]--&gt;|针对|C1[HTML标签]
</code></pre>

<p>Property就是我们之前所学习的对象的属性，如<code>firstElementChild</code>,如<code>children</code>等，这些都是依赖对象存在的</p>
<p>Attribute就是我们HTML里面的那些属性</p>
   <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;请输入用户名&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;userName&quot;</span> <span class="hljs-attr">haha</span>=<span class="hljs-string">&quot;shuaige&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;checkbox&quot;</span> <span class="hljs-attr">checked</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;aaa&quot;</span> <span class="hljs-attr">def</span>=<span class="hljs-string">&quot;biaogege&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">var</span> userName = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;#userName&quot;</span>);</span><br><span class="javascript">    <span class="hljs-keyword">var</span> aaa = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;#aaa&quot;</span>);</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>正常情况在DOM里面会将系统自带的Attribute都会转变成Property，如<code>userName.type</code>,<code>userName.placeholder</code>，<strong>但是自定义的Attribute是不会转换的</strong>，如<code>haha</code>属性与<code>def</code>属性</p>
<p>本意上面，网页也提供了专门用于操作Attribute的方法</p>
   <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">// userName.type;</span><br><span class="hljs-comment">// userName.placeholder;</span><br>userName.getAttribute(<span class="hljs-string">&quot;type&quot;</span>);<br>userName.getAttribute(<span class="hljs-string">&quot;placeholder&quot;</span>);<br></code></pre></td></tr></table></figure>

<p><strong>对于自带属性，我们使用哪一种方式都可以</strong>，但是对于自定义的属性，<strong>则只能</strong>使用<code>getAttribute</code>来操作</p>
   <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs javascript">userName.getAttribute(<span class="hljs-string">&quot;haha&quot;</span>);<br>aaa.getAttribute(<span class="hljs-string">&quot;def&quot;</span>);<br></code></pre></td></tr></table></figure>

<h3 id="7-NodeList与HTMLCollection的区别"><a href="#7-NodeList与HTMLCollection的区别" class="headerlink" title="7.NodeList与HTMLCollection的区别"></a>7.NodeList与HTMLCollection的区别</h3><p>这两个集合是我们的JS在进行DOM 操作的时候经常遇到的2个集合，它们都是一个类数组，但是也有一些区别</p>
<ol>
<li><code>NodeList</code>是一个静态集合</li>
<li><code>HTMLCollection</code>是一个动态集合</li>
</ol>
<p>现在我们通过两个案例来说明它们的特点</p>
<p><strong>HTMLCollection</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;ul1&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第1项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第2项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第3项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第4项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第5项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第6项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">var</span> list1 = <span class="hljs-built_in">document</span>.getElementsByTagName(<span class="hljs-string">&quot;li&quot;</span>);</span><br><span class="javascript">    <span class="hljs-comment">//这个时候的list1是一个HTMLCollection的集合</span></span><br><span class="javascript">    <span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>; i &lt; list1.length; i++) &#123;</span><br><span class="javascript">        list1[i].remove();</span><br><span class="javascript">    &#125;</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>在上面的代码里面，我们本意是想删除 掉所有的li元素，结果因为<code>HTMLCollection</code>是一个动态集合，我们在执行元素删除的时候，它会形成一个水泥效应（队列效应），所以最终页面上面还会剩下几项删不完</p>
<img src="https://pic.imgdb.cn/item/61340f6c44eaada739af6727.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210904145348561" style="zoom:33%;" />

<p><strong>NodeList</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;ul1&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第1项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第2项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第3项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第4项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第5项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第6项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">var</span> list2 = <span class="hljs-built_in">document</span>.querySelectorAll(<span class="hljs-string">&quot;.ul1&gt;li&quot;</span>);</span><br><span class="javascript">    <span class="hljs-comment">//这个时候的list2就是一个NodeList的静态集合</span></span><br><span class="javascript">    <span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i=<span class="hljs-number">0</span>;i&lt;list2.length;i++)&#123;</span><br><span class="javascript">        list2[i].remove();      <span class="hljs-comment">//静态集合</span></span><br><span class="javascript">    &#125;</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>通过上面的方式去删除的时候，因为<code>NodeList</code>是一个静态集合，它的元素在删除以后索引 并没有发生变化，也就是没有沙漏效应，这个时候会把所以的元素都删完</p>
<h2 id="2-0级DOM事件"><a href="#2-0级DOM事件" class="headerlink" title="2. 0级DOM事件"></a>2. 0级DOM事件</h2><p><strong>网页事件触发步骤</strong></p>
<pre><code class=" mermaid">graph LR
A[用户]--&gt;|触发|B[事件]
B--&gt;|调用|C[方法]
</code></pre>

<p>当用户触发了某一个网页上面的特定条件，然后这个特定下执行了一个方法，我们就把这个特定的条件叫事件</p>
<p>在0级DOM事件里面，我们可以把事件大致分为三大类【标哥的分法】</p>
<pre><code class=" mermaid">graph TD
A[事件的分类Event]--&gt;B[鼠标事件MouseEvent]
A--&gt;C[键盘事件KeyboardEvent]
A--&gt;D[其它事件]
</code></pre>

<h3 id="鼠标事件"><a href="#鼠标事件" class="headerlink" title="鼠标事件"></a>鼠标事件</h3><ol>
<li><p><code>onclick</code>鼠标左键单击事件</p>
</li>
<li><p><code>onmousedown</code>鼠标按键按下的事件</p>
</li>
<li><p><code>onmouseup</code>鼠标按钮松开的事件</p>
</li>
<li><p><code>ondblclick</code>鼠标的双击事件</p>
</li>
<li><p><code>onmousemove</code>鼠标移动的事件</p>
</li>
<li><p><code>onmouseenter</code>鼠标进入以后的事件</p>
</li>
<li><p><code>onmouseleave</code>鼠标离开以后的事件</p>
</li>
<li><p><code>onmouseover</code>鼠标进入以后的事件</p>
</li>
<li><p><code>onmouseout</code>鼠标离开以后的事件</p>
<p>在上面的事件里面，我们的鼠标进入与离开是有两组事件的</p>
<p>第一组：<code>onmouseenter/onmouseleave</code>【这一组事件没有事件冒泡，形在不了事件流】</p>
<p>第二组：<code>onmouseover/onmouseout</code></p>
</li>
<li><p><code>onmousewheel</code>鼠标中间的滚轮滚动事件</p>
</li>
<li><p><code>oncontextmenu</code>鼠标上下文菜单事件【通俗的说法就是右键菜单】</p>
</li>
</ol>
<h3 id="键盘事件"><a href="#键盘事件" class="headerlink" title="键盘事件"></a>键盘事件</h3><ol>
<li><p><code>onkeydown</code>键盘的键按下去以后的事件</p>
</li>
<li><p><code>onkeyup</code>键盘按键松开以后的的事件</p>
</li>
<li><p><code>onkeypress</code>键盘敲击以后的事件</p>
<blockquote>
<p><code>onkeydown</code>可以触发所以的按钮，而<code>onkeypress</code>键盘的功能键无法触发，只能触发一般的字符按键</p>
<p>执行顺序如下</p>
</blockquote>
<figure class="highlight xl"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs xl"><span class="hljs-function"><span class="hljs-title">onkeydown</span> ---&gt;</span> <span class="hljs-function"><span class="hljs-title">onkeypress</span> ---&gt;</span> onkeyup<br></code></pre></td></tr></table></figure>


</li>
</ol>
<h3 id="其它事件"><a href="#其它事件" class="headerlink" title="其它事件"></a>其它事件</h3><ol>
<li><p><code>onfocus</code>当一个元素获取到焦点的时候</p>
</li>
<li><p><code>onblur</code>当一个元素失去焦点的时候</p>
</li>
<li><p><code>oninput</code>当一个输入框在输入的时候触发</p>
</li>
<li><p><code>onchange</code>当表单元素里面的值发生改变的时候会触发</p>
<p>这个事件与上面的<code>oninput</code>事件很像，只是这个事件要<strong>失去焦点</strong>以后才会触发</p>
</li>
<li><p><code>onsubmit</code>当表单提交的时候触发</p>
</li>
<li><p><code>onreset</code>当表单被重置的时候</p>
</li>
<li><p><code>onload</code>加载完的时候触发，例如图片就有加载</p>
</li>
<li><p><code>onerror</code>加载失败以后会触发</p>
</li>
<li><p><code>onresize</code>当某一个元素的大小发生变化时会触发</p>
</li>
<li><p><code>onscroll</code>当一个元素滚动条的位置发生变化时触发</p>
</li>
</ol>
<hr>
<h3 id="0级事件的绑定方式"><a href="#0级事件的绑定方式" class="headerlink" title="0级事件的绑定方式"></a>0级事件的绑定方式</h3><h4 id="常规绑定方式-DOM内嵌"><a href="#常规绑定方式-DOM内嵌" class="headerlink" title="常规绑定方式(DOM内嵌)"></a>常规绑定方式(DOM内嵌)</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;btn1&quot;</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">&quot;abc()&quot;</span>&gt;</span>按钮1<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">abc</span>(<span class="hljs-params"></span>) </span>&#123;</span><br><span class="javascript">        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;我是方法abc&quot;</span> + <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>().toLocaleString());</span><br><span class="javascript">    &#125;</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>在上面的代码里面，我们直接在<code>onclick</code>的属性值里面赋值了一个方法，这其实就是属性值赋值给了某一个属性名</p>
<h4 id="动态绑定方式"><a href="#动态绑定方式" class="headerlink" title="动态绑定方式"></a>动态绑定方式</h4><p>在上面的例子里面我们已经说过了，事件本身也是一个属性，我们将方法这一个属性值赋值给了某一个事件，竟然是属性，我们就可以使用<code>对象.属性</code>来进行调用</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;btn1&quot;</span>&gt;</span>按钮1<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">abc</span>(<span class="hljs-params"></span>) </span>&#123;</span><br><span class="javascript">        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;我是方法abc&quot;</span> + <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>().toLocaleString());</span><br><span class="javascript">    &#125;</span><br><span class="javascript">    <span class="hljs-keyword">var</span> btn1 = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;.btn1&quot;</span>);</span><br><span class="javascript">    btn1.onclick = abc;</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><strong>匿名方法</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> btn1 = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;.btn1&quot;</span>);<br>btn1.onclick = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>&#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;我是方法abc&quot;</span> + <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>().toLocaleString());<br>&#125;<br></code></pre></td></tr></table></figure>

<h3 id="事件方法中的this"><a href="#事件方法中的this" class="headerlink" title="事件方法中的this"></a>事件方法中的this</h3><h4 id="第一种情况"><a href="#第一种情况" class="headerlink" title="第一种情况"></a>第一种情况</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;btn1&quot;</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">&quot;console.log(this)&quot;</span>&gt;</span>按钮1<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>我们现在直接<code>onclick</code>的地方去调用<code>this</code>，这个<code>this</code>指向当前的DOM对象</p>
<h4 id="第二种情况"><a href="#第二种情况" class="headerlink" title="第二种情况"></a>第二种情况</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-comment">&lt;!-- 这里的window.abc 的window其实是可以省略掉的 默认的调用者就是 window--&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;btn2&quot;</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">&quot;window.abc()&quot;</span>&gt;</span>按钮2<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;btn3&quot;</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">&quot;obj.abc()&quot;</span>&gt;</span>按钮3<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">abc</span>(<span class="hljs-params"></span>)</span>&#123;</span><br><span class="javascript">        <span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">this</span>);  <span class="hljs-comment">//此时的this是指向的调用者</span></span><br><span class="javascript">    &#125;</span><br><span class="javascript">    <span class="hljs-keyword">var</span> obj = &#123;</span><br><span class="javascript">        <span class="hljs-attr">userName</span>:<span class="hljs-string">&quot;张三&quot;</span>,</span><br><span class="javascript">        <span class="hljs-attr">abc</span>:<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>&#123;</span><br><span class="javascript">            <span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">this</span>);</span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>在上面的案例里面我们发现通过这种方式来执行的函数里面<code>this</code>并没有指向当前的DOM对象，而是指向了<strong>调用对象</strong></p>
<p>如果我们希望获取当前操作的DOM元素，可以进行如下操作</p>
<p><img src="https://pic.imgdb.cn/item/6136b02044eaada739d7e4b3.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210906153955795"></p>
<h4 id="第三种情况"><a href="#第三种情况" class="headerlink" title="第三种情况"></a>第三种情况</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;btn1&quot;</span>&gt;</span>按钮1<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">var</span> btn1 = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;.btn1&quot;</span>);  </span><br><span class="javascript">    btn1.onclick = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>&#123;   <span class="hljs-comment">//dom直接绑定</span></span><br><span class="javascript">        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;我是方法abc&quot;</span>);</span><br><span class="javascript">        <span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">this</span>);</span><br><span class="javascript">    &#125;;</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>通过这一种动态绑定的this,它一定是指向当前绑定事件的DOM对象</p>
<p>通过上面的三种方式，我们快速的获取当前事件触发的这个对象</p>
<h2 id="3-事件对象"><a href="#3-事件对象" class="headerlink" title="3.事件对象"></a>3.事件对象</h2><h3 id="获取事件对象"><a href="#获取事件对象" class="headerlink" title="获取事件对象"></a>获取事件对象</h3><p><strong>第一种</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">&quot;console.log(event)&quot;</span>&gt;</span>按钮<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>这一种方式是直接在行内代码里面获取，然后系统自动向这个事件方法里面在注入一个事件对象<code>event</code></p>
<p><strong>第二种</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">&quot;aaa(event)&quot;</span>&gt;</span>按钮2<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">aaa</span>(<span class="hljs-params">event</span>) </span>&#123;</span><br><span class="javascript">        <span class="hljs-comment">// 在低版本的IE里面，需要处理兼容</span></span><br><span class="javascript">        event = event || <span class="hljs-built_in">window</span>.event;</span><br><span class="javascript">        <span class="hljs-built_in">console</span>.log(event);</span><br><span class="javascript">    &#125;</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>在这一种方式里面，我们要处理兼容性</p>
<p><strong>第三种</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;btn3&quot;</span>&gt;</span>按钮3<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">	<span class="hljs-comment">//动态绑定</span></span><br><span class="javascript">    <span class="hljs-keyword">var</span> btn3 = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;#btn3&quot;</span>);</span><br><span class="javascript">    btn3.onclick = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">event</span>)</span>&#123;</span><br><span class="javascript">        <span class="hljs-comment">//在动态绑定里面，系统会自动的向事件方法里面注入参数event</span></span><br><span class="javascript">        <span class="hljs-comment">//但是这个event仍然要做兼容处理，还是为了兼容低版本IE</span></span><br><span class="javascript">        event = event || <span class="hljs-built_in">window</span>.event;</span><br><span class="javascript">        <span class="hljs-built_in">console</span>.log(event);</span><br><span class="javascript">    &#125;</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>在这一种方式里面，系统会自动的向事件方法里面注入一个参数<code>event</code>，但是仍然需要做兼容性处理</p>
<h3 id="分析事件对象"><a href="#分析事件对象" class="headerlink" title="分析事件对象"></a>分析事件对象</h3><h4 id="鼠标事件对象"><a href="#鼠标事件对象" class="headerlink" title="鼠标事件对象"></a>鼠标事件对象</h4><ol>
<li><p><code>altKey</code>触发当前事件的时候是否有按下<code>alt</code>键</p>
</li>
<li><p><code>ctrlKey</code>触发当前事件的时候是否有按下<code>Ctrl</code>键</p>
</li>
<li><p><code>shiftKey</code>触发当前事件的时候是否有按下<code>shift</code>键</p>
</li>
<li><p><code>button</code>代表鼠标事件触发是哪一个按键，0代表左键，1代表中键，2代表右键</p>
<p><img src="https://pic.imgdb.cn/item/6137464544eaada739d84c34.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210907103847193"></p>
</li>
<li><p><code>clientX/clientY</code>代表鼠标事件触发的的时候距离浏览器左边或上边的标的坐标位置</p>
<p>这里有一个小技巧要记一下，<code>client</code>就是客户端 ，客户端就是浏览器</p>
</li>
<li><p><code>screenX/screenY</code>代表鼠标事件触发的时候距离屏幕左边或上边的坐标位置</p>
</li>
<li><p><code>x/y</code>指的就是<code>clientX/clientY</code>。出现一个像这样的原因还是因为浏览器的兼容性</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//如果说我们想获取一个元素距离浏览器左边的距离</span><br><span class="hljs-keyword">var</span> x = event.x || event.clientX;<br></code></pre></td></tr></table></figure>
</li>
<li><p><code>offsetX/offsetY</code>代表鼠标事件触发的时候距离<strong>事件触发者</strong>的坐标距离</p>
</li>
<li><p><code>pageX/pageY</code>代表的是鼠标事件触发的时候距离页面左边或上边的距离</p>
</li>
<li><p><code>type</code>当前事件的类型</p>
</li>
<li><p><code>path</code>代表当前事件冒泡的路径（或叫事件传递的路径）</p>
</li>
<li><p><code>bubbles</code>代表当前事件是否冒泡</p>
</li>
<li><p><code>cancelBubble</code>代表当前事件是否取消了冒泡</p>
</li>
<li><p><code>cancelable</code>代表当前事件是否可以取消冒泡</p>
</li>
</ol>
<h4 id="键盘事件对象"><a href="#键盘事件对象" class="headerlink" title="键盘事件对象"></a>键盘事件对象</h4><ol>
<li><code>keyCode</code>代表当前按钮的编码</li>
<li><code>key</code>代表你当前按下这个键的字符</li>
<li><code>repeat</code>代表当前事件的触发是否是因为之前的按键没有松开而连续触发的，true代表没有松开而连续触发的</li>
</ol>
<h3 id="事件流"><a href="#事件流" class="headerlink" title="事件流"></a>事件流</h3><p>事件流说得通俗一点，指是是事件的传播行为，关于事件的传播行为，请看下面的例子</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">&quot;aaa(event)&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;small-box&quot;</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">&quot;bbb(event)&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">aaa</span>(<span class="hljs-params">event</span>)</span>&#123;</span><br><span class="javascript">        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;我是box的盒子&quot;</span>);</span><br><span class="javascript">    &#125;</span><br><span class="javascript">    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">bbb</span>(<span class="hljs-params">event</span>)</span>&#123;</span><br><span class="javascript">        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;我是里面的小盒子的盒子small-box&quot;</span>);</span><br><span class="javascript">    &#125;</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><img src="https://pic.imgdb.cn/item/6137488644eaada739dc61e1.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210907112059933"></p>
<p>当我们去点击红色的盒子的时候，外部的盒子的事件也同时触发了，这个时候小盒了里面的<code>onclick</code>就传播给了大盒子的<code>onclick</code>，这种现象，我们叫事件的传播，同时也叫事件冒泡</p>
<h4 id="事件冒泡"><a href="#事件冒泡" class="headerlink" title="事件冒泡"></a>事件冒泡</h4><p>事件冒泡指的是同一类型的事件会在元素的内部向外部进行传递，这种现象称之为事件冒泡，上面的例子其实就是一个典型的事件冒泡的例子，同时我们也可以在事件对象里面看到它冒泡的顺序</p>
<p><img src="https://pic.imgdb.cn/item/6152c56b2ab3f51d91b595d0.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210907112936750"></p>
<p>事件对象里面的<code>path</code>属性可以看到当前这个事件的传递路径</p>
<h4 id="取消事件冒泡"><a href="#取消事件冒泡" class="headerlink" title="取消事件冒泡"></a>取消事件冒泡</h4><p>虽然事件冒泡是默认就存在的行为，但是我们在有些场景下面需要将事件隔开，这个时候就要取消事件冒泡</p>
<p><img src="https://pic.imgdb.cn/item/61374be144eaada739e25c8b.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210907115231577"></p>
<p>阻止事件的冒泡主要设置两个点</p>
<ol>
<li><code>event.cancelBubble=true</code>阻止事件冒泡</li>
<li><code>event.stopPropagation()</code>阻止事件的传播</li>
</ol>
<h4 id="事件的绑定者与触发者【重点】"><a href="#事件的绑定者与触发者【重点】" class="headerlink" title="事件的绑定者与触发者【重点】"></a>事件的绑定者与触发者【重点】</h4><p>因为事件是有传播现象的，所以事件方法在执行的时候可以看出当前对象是被哪个元素触发事件</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">&quot;aaa(event)&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;btn1&quot;</span>&gt;</span>按钮<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">hr</span>&gt;</span><br>    事件现在绑定在盒子上面<br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">aaa</span>(<span class="hljs-params">event</span>) </span>&#123;</span><br><span class="javascript">        <span class="hljs-keyword">var</span> event = event || <span class="hljs-built_in">window</span>.event;</span><br><span class="javascript">        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;大家好， 我是box盒子&quot;</span>);</span><br><span class="javascript">        <span class="hljs-comment">// console.log(event);</span></span><br><span class="javascript">        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;target&quot;</span>, event.target);</span><br><span class="javascript">        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;currentTarget&quot;</span>, event.currentTarget);</span><br><span class="javascript">    &#125;</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-comment">&lt;!-- </span><br><span class="hljs-comment">    target: 事件的触发者</span><br><span class="hljs-comment">    currentTarget：事件绑定者</span><br><span class="hljs-comment"> --&gt;</span><br></code></pre></td></tr></table></figure>

<p><img src="https://pic.imgdb.cn/item/61374aee44eaada739e0b3db.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210907140103297"></p>
<p>当我们去点击里面的按钮的时候，事件是由按钮的触发的，但是事件又绑定在了外边的盒子box上面</p>
<ul>
<li><code>target</code>代表的是事件的触发者</li>
<li><code>currentTarget</code>代表事件的绑定者</li>
</ul>
<h3 id="事件委托"><a href="#事件委托" class="headerlink" title="事件委托"></a>事件委托</h3><p>因为事件是一个传播行为，所以我们可以认为内部的事件总是会冒泡到外部，这个样做就可以实现一种特殊的场景叫事件委托</p>
<p>什么是事件委托，请先看下面的代码</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;btn1&quot;</span>&gt;</span>按钮1<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;btn1&quot;</span>&gt;</span>按钮2<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;btn1&quot;</span>&gt;</span>按钮3<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;btn1&quot;</span>&gt;</span>按钮4<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>这是一个2号标题<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>这是一个段落<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">hr</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">&quot;addButton()&quot;</span>&gt;</span>新增新的按钮<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><strong>要求</strong>：将box盒子里面的所有的button都绑定一个点击事件，然后点击触发以后，打印当前按钮的文字</p>
<p><strong>第一种方法：使用批量绑定的方式去完成</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> btn1List = <span class="hljs-built_in">document</span>.querySelectorAll(<span class="hljs-string">&quot;.btn1&quot;</span>);<br>btn1List.forEach(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">item, index, _arr</span>) </span>&#123;<br>    item.onclick = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">event</span>) </span>&#123;<br>        <span class="hljs-built_in">console</span>.log(item.innerText);<br>    &#125;<br>&#125;);<br><br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">addButton</span>(<span class="hljs-params"></span>)</span>&#123;<br>    <span class="hljs-keyword">var</span> btn = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">&quot;button&quot;</span>);<br>    btn.className = <span class="hljs-string">&quot;btn1&quot;</span>;<br>    btn.innerText = <span class="hljs-string">&quot;按钮5&quot;</span>;<br>    <span class="hljs-keyword">var</span> box = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;.box&quot;</span>);<br>    box.appendChild(btn);<br>&#125;<br></code></pre></td></tr></table></figure>

<p><span style="font-weight:bold;color:red;">存在的问题：</span></p>
<ol>
<li>事件绑定非常麻烦，需要把所有的<code>class=&quot;btn1&quot;</code>的元素获取以后，遍历 ，再依次绑定事件。同时这做么会非常消耗浏览器的性能，照成网页卡顿</li>
<li>当我们调用<code>addButton()</code>的方法动态的向box盒子里面添加按钮的时候，我们发现新添加的元素没有绑定事件</li>
</ol>
<p><strong>第二种方法：利用事件的传播行为来完成</strong></p>
<p><img src="https://pic.imgdb.cn/item/61374be144eaada739e25c8b.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210907142821394"></p>
<p>通过这两种方式的对比，我们发现了一个现象。在第二种方式里面，本来应该绑定了子级元素<code>button</code>上面的事件，现在绑定在了外层元素<code>box</code>上面了，这种现象就叫事件委托</p>
<h4 id="判断事件的触发者"><a href="#判断事件的触发者" class="headerlink" title="判断事件的触发者"></a>判断事件的触发者</h4><p>在上面的事件委托里面，我们可以看到事件是绑定了父级，然后再去通过判断<code>event.target</code>来决定是否调用代码，这个时候就会有一些问题，如下</p>
<p><img src="https://pic.imgdb.cn/item/61374c1c44eaada739e2c339.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210907144437155"></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;ul1&quot;</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">&quot;abc(event)&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第一项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第二项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第三项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第四项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">&quot;addLi()&quot;</span>&gt;</span>新增li标签<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-comment">// 要求对ul1下在面的奇数项li来绑定点击事件，触发以后打印innerText内容</span></span><br><span class="javascript">    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">abc</span>(<span class="hljs-params">event</span>) </span>&#123;</span><br><span class="javascript">        event = event || <span class="hljs-built_in">window</span>.event;</span><br><span class="javascript">        <span class="hljs-comment">//怎么样判断事件的触发者为奇数项呢</span></span><br><span class="javascript">        <span class="hljs-keyword">if</span> (event.target.matches(<span class="hljs-string">&quot;.ul1&gt;li:nth-child(odd)&quot;</span>)) &#123;</span><br><span class="javascript">            <span class="hljs-built_in">console</span>.log(event.target.innerText);</span><br><span class="javascript">        &#125;</span><br><span class="javascript">    &#125;</span><br><span class="javascript"></span><br><span class="javascript">    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">addLi</span>(<span class="hljs-params"></span>) </span>&#123;</span><br><span class="javascript">        <span class="hljs-keyword">var</span> ul1 = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;.ul1&quot;</span>);</span><br><span class="javascript">        <span class="hljs-keyword">var</span> newli = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">&quot;li&quot;</span>);</span><br><span class="javascript">        newli.innerText = <span class="hljs-string">&quot;标哥哥新增&quot;</span>;</span><br><span class="javascript">        ul1.appendChild(newli);</span><br><span class="javascript">    &#125;</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>通过上面的这个<code>matches()</code>方法，我们可以判断某一个Element的元素是否可以被选择器选中，这样在做事件委托里面判断事件触发者的时候就非常方便了</p>
<h4 id="事件方法中的this-1"><a href="#事件方法中的this-1" class="headerlink" title="事件方法中的this"></a>事件方法中的this</h4><p>事件方法中的this永远都是指向事件的绑定者<code>currentTarget</code></p>
<p><img src="https://pic.imgdb.cn/item/61374c7444eaada739e3592a.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210907150155254"></p>
<h3 id="事件先于响应"><a href="#事件先于响应" class="headerlink" title="事件先于响应"></a>事件先于响应</h3><p>先看下面的代码</p>
<p><strong>第一个例子</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;http://www.baidu.com&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;a1&quot;</span>&gt;</span>百度一下<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-comment">// 在上面的代码里面href就是a标签在点击以后的响应操作</span></span><br><span class="javascript">    <span class="hljs-comment">// 事件先于响应指是的相应的事件应该在响应之前</span></span><br><span class="javascript">    <span class="hljs-keyword">var</span> a1 = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;#a1&quot;</span>);</span><br><span class="javascript">    a1.onclick = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>&#123;</span><br><span class="javascript">        alert(<span class="hljs-string">&quot;标哥哥&quot;</span>);</span><br><span class="javascript">    &#125;</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>在上面的代码里面，我们对a的链接标签同时指定了<code>href</code>的链接属性，以及绑定了<code>onclick</code>的点击事件，这个时候当我们点击这个时候，根据<strong>事件先于响应</strong>的原则 ，它会先触发<code>onclick</code>，再去执行<code>href</code>的跳转响应操作</p>
<p><strong>第二个例子</strong></p>
<p>现在我们再以表单元素为例子来说明一下</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">form</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;form1&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;userName&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">hr</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;reset&quot;</span>&gt;</span>重置<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">var</span> form1 = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;#form1&quot;</span>);</span><br><span class="javascript">    form1.onreset = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">event</span>)</span>&#123;</span><br><span class="javascript">        alert(<span class="hljs-string">&quot;我是reset的事件&quot;</span>);</span><br><span class="javascript">    &#125;</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>通过<code>reset</code>的例子，我们也看到了，<code>onreset</code>的事件是先触发的，然后再去执行<code>reset</code>的重置操作</p>
<p><strong>第三个例子</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">var</span> box = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;.box&quot;</span>);</span><br><span class="javascript">    box.oncontextmenu = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">event</span>)</span>&#123;</span><br><span class="javascript">        alert(<span class="hljs-string">&quot;你在点击鼠标右键&quot;</span>);</span><br><span class="javascript">    &#125;</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>事件先于响应这是原则 ，但并不是所有的事件最终都会触发响应，它是有条件的</p>
<pre><code class=" mermaid">graph TD
A[0级事件触发]--&gt;|事件返回值不为false|B[继续执行响应操作]
A--&gt;|事件返回结果为false|C[停止执行响应操作]
</code></pre>

<p>如果我们要是在刚刚的事件后面添加一个<code>return false</code>，则默认的响应行为就不会再去执行了，这种现象在0级事件里面叫<strong>事件先于响应</strong>，在2级事件里面叫<strong>取消事件的默认行为</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;a1&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;http://www.baidu.com&quot;</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">&quot;return aaa(event)&quot;</span>&gt;</span>百度一下<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;a2&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;http://www.softeem.xin:8090&quot;</span>&gt;</span>标哥的博客<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-comment">//事件的绑定方式是有2种的</span></span><br><span class="javascript">    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">aaa</span>(<span class="hljs-params">event</span>)</span>&#123;</span><br><span class="javascript">        alert(<span class="hljs-string">&quot;我是普通方式绑定的&quot;</span>);</span><br><span class="javascript">        <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;</span><br><span class="javascript">    &#125;</span><br><span class="javascript"></span><br><span class="javascript">    <span class="hljs-comment">//第二种方式绑定</span></span><br><span class="javascript">    <span class="hljs-keyword">var</span> a2 = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;#a2&quot;</span>);</span><br><span class="javascript">    a2.onclick = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">event</span>)</span>&#123;</span><br><span class="javascript">        alert(<span class="hljs-string">&quot;我是通过动态绑定的方式完成的&quot;</span>);</span><br><span class="javascript">        <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;</span><br><span class="javascript">    &#125;</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><img src="https://pic.imgdb.cn/item/61374f3744eaada739e8499b.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210907155624479"></p>
<p><strong>扩展：</strong></p>
<p>因为有事件先于响应的原则，所以在我们的事件里面，经常会持到下面的代码</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;javascript:void(0)&quot;</span>&gt;</span>这是一个链接<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>  //相当于#<br></code></pre></td></tr></table></figure>

<p>而<code>void(0)</code>得到的结果是<code>undefined</code></p>
<h2 id="4-2级DOM事件"><a href="#4-2级DOM事件" class="headerlink" title="4. 2级DOM事件"></a>4. 2级DOM事件</h2><p>2级DOM事件是在原来0级DOM事件上面做了一些扩展，扩展点主要如下</p>
<ol>
<li>多了一些事件</li>
<li>改变了事件的绑定方式，以监听的形式存在</li>
<li>可以形成事件链</li>
<li>可以改变事件的传播方向</li>
</ol>
<p>之前我们在分析DOM的层次结构的时候，得到了如下的一个图</p>
<p><img src="https://pic.imgdb.cn/item/6132ba6b44eaada739fe134c.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210908090837147"></p>
<img src="https://pic.imgdb.cn/item/6138976444eaada7391ea48b.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210908091222546" style="zoom:50%;" />

<p>在最终的这个<code>EventTarget</code>里面，我们可以看到如上图所示的东西，在这一层的对象里面，我们看到了3个特殊的方法</p>
<ol>
<li><code>addEventListner()</code>添加事件监听</li>
<li><code>removeEventListener()</code>移除事件监听</li>
<li><code>dispatchEvent()</code>派发一个事件【学习自定义事件，订阅者与发布者模式，<strong>俗称观察者模式</strong>】</li>
</ol>
<h3 id="添加事件监听"><a href="#添加事件监听" class="headerlink" title="添加事件监听"></a>添加事件监听</h3><p>0级DOM事件是依赖于<code>Element</code>对象的，所以在0级事件里面，所有的事件都是以属性的形式存在，但是在DOM的2级事件里面，事件是通过监听来实现的，它的语法格式如下</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs javascript">元素.addEventListener(<span class="hljs-string">&quot;事件名&quot;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">event</span>)</span>&#123;<br>    <span class="hljs-comment">//函数体</span><br>&#125;,<span class="hljs-literal">true</span>/<span class="hljs-literal">false</span>?);<br></code></pre></td></tr></table></figure>

<p>上面就是事件监听的基本语法，其中最后的参数<code>true</code>或<code>false</code>代表事件的传播方向；默认是false代表事件是进行由内向外进行冒泡传递 ，<code>true</code>代表事件由外向内进行传递</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">var</span> box = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;.box&quot;</span>);</span><br><span class="javascript">    box.addEventListener(<span class="hljs-string">&quot;click&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">event</span>) </span>&#123;</span><br><span class="javascript">        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;我是click事件&quot;</span> + <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>().toLocaleString());</span><br><span class="javascript">    &#125;)</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h3 id="移除事件监听"><a href="#移除事件监听" class="headerlink" title="移除事件监听"></a>移除事件监听</h3><p>在之前的0级DOM事件里面，如果我们要取消一个0级DOM事件，可以用如下方式</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">hr</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;btn1&quot;</span>&gt;</span>取消box的点击事件<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">var</span> box = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;.box&quot;</span>);</span><br><span class="javascript">    box.onclick = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">event</span>) </span>&#123;</span><br><span class="javascript">        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;我是box的0级事件&quot;</span>);</span><br><span class="javascript">    &#125;</span><br><span class="javascript">    <span class="hljs-keyword">var</span> btn1 = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;#btn1&quot;</span>);</span><br><span class="javascript">    btn1.onclick = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>&#123;</span><br><span class="javascript">        <span class="hljs-comment">//取消box的点击事件</span></span><br><span class="javascript">        box.onclick = <span class="hljs-literal">null</span>;</span><br><span class="javascript">    &#125;</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>因为0级DOM事件是以属性的形式存在的，所以要取消这个事件，只需要把这个事件的属性设置为<code>null</code></p>
<p>但是2级DOM事件则不行，2级DOM事件是以监听的形式存在的，所以如果想取消某一个2级DOM事件，则一定要使用<code>removeEventListener</code>移除这个事件监听</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">hr</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;btn1&quot;</span>&gt;</span>取消box的点击事件<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">var</span> box = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;.box&quot;</span>);</span><br><span class="javascript">    box.addEventListener(<span class="hljs-string">&quot;click&quot;</span>, aaa);</span><br><span class="javascript"></span><br><span class="javascript">    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">aaa</span>(<span class="hljs-params">event</span>) </span>&#123;</span><br><span class="javascript">        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;我是要给box使用的方法&quot;</span>);</span><br><span class="javascript">    &#125;</span><br><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">var</span> btn1 = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;#btn1&quot;</span>);</span><br><span class="javascript">    btn1.addEventListener(<span class="hljs-string">&quot;click&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">event</span>) </span>&#123;</span><br><span class="javascript">        <span class="hljs-comment">//移除box的click事件监听</span></span><br><span class="javascript">        box.removeEventListener(<span class="hljs-string">&quot;click&quot;</span>, aaa);</span><br><span class="javascript">        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;我已经移除了box的click事件监听&quot;</span>);</span><br><span class="javascript">    &#125;)</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>下面就是一个最典型的例子，在程序当中，我们添加一按钮，设计抽奖，但是只允许抽奖一次，所以我们需要如下进行</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;btn1&quot;</span>&gt;</span>开始抽奖<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">var</span> btn1 = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;#btn1&quot;</span>);</span><br><span class="javascript">    btn1.addEventListener(<span class="hljs-string">&quot;click&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>&#123;</span><br><span class="javascript">        <span class="hljs-keyword">var</span> result = [<span class="hljs-string">&quot;一等奖&quot;</span>, <span class="hljs-string">&quot;二等奖&quot;</span>, <span class="hljs-string">&quot;三等奖&quot;</span>, <span class="hljs-string">&quot;幸运奖&quot;</span>, <span class="hljs-string">&quot;祝您好运&quot;</span>][<span class="hljs-built_in">parseInt</span>(<span class="hljs-built_in">Math</span>.random() * <span class="hljs-number">5</span>)];</span><br><span class="javascript">        <span class="hljs-built_in">console</span>.log(result);</span><br><span class="javascript"></span><br><span class="javascript">        <span class="hljs-comment">//当上面的事件方法执行完毕以后，我们就可以移除这个事件监听，这样这个事件就只会执行一次</span></span><br><span class="javascript">        btn1.removeEventListener(<span class="hljs-string">&quot;click&quot;</span>, <span class="hljs-built_in">arguments</span>.callee);</span><br><span class="javascript">    &#125;);</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p><strong>代码说明</strong>：</p>
<ol>
<li><code>arguments.callee</code>指向当前的函数</li>
<li><code>removeEventListener</code>移除一个事件监听</li>
</ol>
<p>当用户一旦触发click的事件就会执行代码，在这个代码的最后就会移除这个事件，这样后面再点击就没有效果了</p>
</blockquote>
<h3 id="2级事件的事件链"><a href="#2级事件的事件链" class="headerlink" title="2级事件的事件链"></a>2级事件的事件链</h3><p>在0级DOM事件里在，因为事件是以属性的形式存在，所以不能多次赋值，如下代码所示</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;btn1&quot;</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">&quot;abc()&quot;</span>&gt;</span>我是按钮<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">abc</span>(<span class="hljs-params"></span>)</span>&#123;</span><br><span class="javascript">        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;abc&quot;</span>);</span><br><span class="javascript">    &#125;</span><br><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">var</span> btn1 = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;#btn1&quot;</span>);</span><br><span class="javascript">    btn1.onclick = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">event</span>)</span>&#123;    <span class="hljs-comment">//下面覆盖上面</span></span><br><span class="javascript">        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;def&quot;</span>);</span><br><span class="javascript">    &#125;</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>通过上面的例子我们可以发现，因为0级事件是以属性的形式存在，所以最终事件触发以后打印的结果是”def”</p>
<p>所以0级事件是形成不了这样的链条的样子的</p>
<p>现在我们在0级事件上面再次添加2级事件</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;btn1&quot;</span>&gt;</span>我是按钮<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">var</span> btn1 = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;#btn1&quot;</span>);</span><br><span class="javascript"></span><br><span class="javascript">    btn1.addEventListener(<span class="hljs-string">&quot;click&quot;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">event</span>)</span>&#123;</span><br><span class="javascript">        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;我是第一次添加的2级DOM事件&quot;</span>);</span><br><span class="javascript">    &#125;);</span><br><span class="javascript"></span><br><span class="javascript">    btn1.onclick = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">event</span>) </span>&#123;</span><br><span class="javascript">        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;我是0级DOM事件&quot;</span>);</span><br><span class="javascript">    &#125;</span><br><span class="javascript"></span><br><span class="javascript">    btn1.addEventListener(<span class="hljs-string">&quot;click&quot;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">event</span>)</span>&#123;</span><br><span class="javascript">        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;我是第二次添加的2级DOM事件&quot;</span>);</span><br><span class="javascript">    &#125;);</span><br><span class="javascript"></span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><img src="https://pic.imgdb.cn/item/613899d544eaada739220489.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210908103038756"></p>
<p>当我们去触发click事件的时候，我们可以看到0级事件与2级事件都存在，<strong>并且事件触发以后执行方法的顺序就是我们代码当中绑定的顺序</strong></p>
<h4 id="断开事件链"><a href="#断开事件链" class="headerlink" title="断开事件链"></a>断开事件链</h4><p>在上在的章节我们已经讲到了2级事件是可以形成事件链，触发事件以后，这个事件会像链接一样依次执行方法，但是我们可以在某一个地方把这个链条断开</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">&quot;console.log(&#x27;我是外边的大盒子&#x27;)&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;btn1&quot;</span>&gt;</span>我是按钮<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">var</span> btn1 = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;#btn1&quot;</span>);</span><br><span class="javascript"></span><br><span class="javascript">    btn1.addEventListener(<span class="hljs-string">&quot;click&quot;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">event</span>)</span>&#123;</span><br><span class="javascript">        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;我是第一次添加的2级DOM事件&quot;</span>);</span><br><span class="javascript">    &#125;);</span><br><span class="javascript"></span><br><span class="javascript">    btn1.onclick = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">event</span>) </span>&#123;</span><br><span class="javascript">        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;我是0级DOM事件&quot;</span>);</span><br><span class="javascript">    &#125;</span><br><span class="javascript"></span><br><span class="javascript">    btn1.addEventListener(<span class="hljs-string">&quot;click&quot;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">event</span>)</span>&#123;</span><br><span class="javascript">        event = event || <span class="hljs-built_in">window</span>.event;</span><br><span class="javascript">        <span class="hljs-built_in">console</span>.log(event);</span><br><span class="javascript">        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;我是第二次添加的2级DOM事件&quot;</span>);</span><br><span class="javascript">        event.stopImmediatePropagation();           <span class="hljs-comment">//断开事件链，并阻止冒泡</span></span><br><span class="javascript">    &#125;);</span><br><span class="javascript">    </span><br><span class="javascript">    btn1.addEventListener(<span class="hljs-string">&quot;click&quot;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">event</span>)</span>&#123;</span><br><span class="javascript">        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;我是第三次添加的3级DOM事件&quot;</span>);</span><br><span class="javascript">    &#125;)</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p><strong>代码分析</strong>：</p>
<p>在上面的事件里面，我们通过在第二次事件绑定里面调用了<code>event.stopImmediatePropagation()</code>这个方法，这样就断开了事件链，并停止了事件的传播（也就是阻止了事件的冒泡与捕获）</p>
</blockquote>
<h3 id="2级事件的传播方向"><a href="#2级事件的传播方向" class="headerlink" title="2级事件的传播方向"></a>2级事件的传播方向</h3><p>在之前学习0级事件的时候，我们看到事件的是由内向外进行冒泡传递，这个是不可以设置的。但是现在在2级事件里面，我们可以设置事件的传播方向了</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript">元素.addEventListener(<span class="hljs-string">&quot;事件&quot;</span>,回调函数,传播方向)<br></code></pre></td></tr></table></figure>

<p>事件的传播方向主要有两种</p>
<ol>
<li>事件如果由内向外传递，我们称之为事件冒泡</li>
<li>事件如果由外向内传递，我们称之为事件捕获</li>
</ol>
<p>在<code>addEventListener()</code>这个方法的第三个参数里面，如果设置为<code>false</code>则代表事件冒泡，如果设置为<code>true</code>则代表事件捕获，默认值是<code>false</code></p>
<p><strong>事件冒泡的案例</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;btn1&quot;</span>&gt;</span>按钮<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">var</span> box = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;.box&quot;</span>);</span><br><span class="javascript">    <span class="hljs-keyword">var</span> btn1 = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;.btn1&quot;</span>);</span><br><span class="javascript">    box.addEventListener(<span class="hljs-string">&quot;click&quot;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">event</span>)</span>&#123;</span><br><span class="javascript">        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;我是box&quot;</span>);</span><br><span class="javascript">    &#125;)</span><br><span class="javascript">    btn1.addEventListener(<span class="hljs-string">&quot;click&quot;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">event</span>)</span>&#123;</span><br><span class="javascript">        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;我是按钮&quot;</span>);</span><br><span class="javascript">    &#125;)</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><img src="https://pic.imgdb.cn/item/61389aaf44eaada739233243.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210908105200205"></p>
<p><strong>事件捕获的案例</strong></p>
<p>我们现在只需要把上面的代码改一下即可</p>
<p><img src="https://pic.imgdb.cn/item/61389af544eaada73923897c.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210908105423057"></p>
<p>结果如下图</p>
<p><img src="https://pic.imgdb.cn/item/61389aa544eaada7392325ef.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210908105507514"></p>
<h3 id="！！！2级事件的兼容性"><a href="#！！！2级事件的兼容性" class="headerlink" title="！！！2级事件的兼容性"></a>！！！2级事件的兼容性</h3><p>2级事件是后出来的事件，所以它会有兼容性，在低版本的IE里面，它的事件监听是另一种体现形式</p>
<table>
<thead>
<tr>
<th>W3C标准</th>
<th>低版本IE</th>
</tr>
</thead>
<tbody><tr>
<td><code>addEventListener()</code></td>
<td><code>attachEvent()</code></td>
</tr>
<tr>
<td><code>removeEventListener()</code></td>
<td><code>detachEvent()</code></td>
</tr>
</tbody></table>
<p>如果现在有一个事件，我们需要去绑定<code>click</code>，在低版本IE和W3C标准里面各不相同</p>
<p><strong>W3C标准</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs javascript">btn1.addEventListener(<span class="hljs-string">&quot;click&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">event</span>) </span>&#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;我是按钮的click事件&quot;</span>);<br>&#125;);<br></code></pre></td></tr></table></figure>

<p><strong>低版本IE标准</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs javascript">btn1.attachEvent(<span class="hljs-string">&quot;onclick&quot;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">event</span>)</span>&#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;我是IE里面的click事件&quot;</span>);<br>&#125;);<br></code></pre></td></tr></table></figure>

<h3 id="取消事件的默认行为"><a href="#取消事件的默认行为" class="headerlink" title="取消事件的默认行为"></a>取消事件的默认行为</h3><p>在之前讲0级事件的时候，我们讲到过一个概念“事件先于响应”，我们的0级事件与2级事件都是在响应之前，同时我们也学习了一点，如果想取消默认的行为，我们在0级事件里面的处理方式如下</p>
<p><strong>0级事件取消默认为行</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;http://www.baidu.com&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;a1&quot;</span>&gt;</span>百度一下<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;http://www.softeem.xin:8090&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;a2&quot;</span>&gt;</span>标哥的博客<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">var</span> a1 = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;#a1&quot;</span>);</span><br><span class="javascript">    <span class="hljs-keyword">var</span> a2 = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;#a2&quot;</span>);</span><br><span class="javascript"></span><br><span class="javascript">    a1.onclick = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">event</span>) </span>&#123;</span><br><span class="javascript">        alert(<span class="hljs-string">&quot;我是第一个&quot;</span>);</span><br><span class="javascript">        <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;			<span class="hljs-comment">//这里有效果</span></span><br><span class="javascript">    &#125;</span><br><span class="javascript">    a2.addEventListener(<span class="hljs-string">&quot;click&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">event</span>) </span>&#123;</span><br><span class="javascript">        alert(<span class="hljs-string">&quot;我是第二个&quot;</span>);</span><br><span class="javascript">        <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;           <span class="hljs-comment">//这里是没有效果的，仍然阻止不了a标签的跳转行为</span></span><br><span class="javascript">    &#125;);</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><strong>2级事件取消默认行为</strong></p>
<p><img src="https://pic.imgdb.cn/item/61389bb044eaada739247770.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210908113820129"></p>
<h3 id="！！！0级事件与2级事件的区别"><a href="#！！！0级事件与2级事件的区别" class="headerlink" title="！！！0级事件与2级事件的区别"></a>！！！0级事件与2级事件的区别</h3><ol>
<li>DOM的0级事件是以属性存在，不能多次绑定赋值 ，而DOM的2级事件是以监听的形式存在，可以多次监听，所以2级事件可以形成事件链</li>
<li>DOM的0级事件里面，它是以<code>on事件名</code>存在的，而DOM的2级事件里面在监听的时候去掉了前面的<code>on</code></li>
<li>DOM的0级事件不能控制事件的传播方向，而DOM的2级事件可以通过最后一个参数来控制事件的传播方法</li>
<li>DOM的0级事件如果要取消，只需要对这个事件的属性赋值为<code>null</code>，2级DOM事件如果要取消某一次监听，需要通过<code>removeEventListener()</code></li>
<li>0级事件如果需要取消事件的默认行业则再事件方法最后<code>return false</code>，而2级事件如果想要取消事件的默认行为，则只能使用<code>event.preventDefault()</code></li>
</ol>
<h2 id="5-DOM的样式操作"><a href="#5-DOM的样式操作" class="headerlink" title="5.DOM的样式操作"></a>5.DOM的样式操作</h2><h3 id="1-行内样式操作"><a href="#1-行内样式操作" class="headerlink" title="1.行内样式操作"></a>1.行内样式操作</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>	<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><br>	我是一个盒子<br>	<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">	<span class="hljs-keyword">var</span> box = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;.box&quot;</span>);</span><br><span class="javascript">	box.style.color = <span class="hljs-string">&quot;white&quot;</span>;</span><br><span class="javascript">	<span class="hljs-comment">// 正常CSS里面的属性font-size</span></span><br><span class="javascript">	box.style[<span class="hljs-string">&quot;font-size&quot;</span>] = <span class="hljs-string">&quot;36px&quot;</span>;</span><br><span class="javascript">	<span class="hljs-comment">// 设置border-radius为50%</span></span><br><span class="javascript">	box.style.borderRadius = <span class="hljs-string">&quot;50%&quot;</span>;</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p> 在上面的操作里面请注意，当CSS的属性里面有 - 的时候，要去掉 - 然后后面的首字母转大写</p>
</blockquote>
<blockquote>
<p>style在操作样式的时候，我们<strong>建议只赋值</strong>，而不要取值，style在进行取值操作的时候，只能获取到行内的样式。</p>
</blockquote>
<h3 id="2-内部样式块的操作"><a href="#2-内部样式块的操作" class="headerlink" title="2.内部样式块的操作"></a>2.内部样式块的操作</h3><blockquote>
<p>了解即可，实际开发不要乱用</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"></span><br><span class="css"><span class="hljs-selector-class">.box</span>&#123;</span><br><span class="css">	<span class="hljs-attribute">width</span>: <span class="hljs-number">100px</span>;</span><br><span class="css">	<span class="hljs-attribute">height</span>: <span class="hljs-number">100px</span>;</span><br><span class="css">	<span class="hljs-attribute">background-color</span>: lightseagreen;</span><br><span class="css">	<span class="hljs-attribute">margin-top</span>: <span class="hljs-number">10px</span>;</span><br><span class="css">	&#125;</span><br><span class="css"></span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>	<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><br>	这是一个盒子<br>	<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>	<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><br>	这是一个盒子<br>	<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>	<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><br>	这是一个盒子<br>	<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>&lt;/body<br></code></pre></td></tr></table></figure>

<blockquote>
<p>为什么需要操作内部样式块，是因为我们在这个地方有一些页面上面的元素是通过相同的class在设置，所以 这个时候如果我们把 .box 改变了，这个时候所以使用了 box 的样式都会变掉，这一种操作方式就明显比上 面的 style 要快</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> s = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;style&quot;</span>);<br></code></pre></td></tr></table></figure>

<p><img src="https://pic.imgdb.cn/item/6138a24144eaada7392d6d7e.jpg" srcset="/blog/img/loading.gif" lazyload></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs javascript">s.sheet.cssRules[<span class="hljs-number">0</span>].style.width = <span class="hljs-string">&quot;200px&quot;</span>; <span class="hljs-comment">//将第一个规则下面的width设置为200px</span><br>s.sheet.cssRules[<span class="hljs-number">1</span>].style.borderRadius=<span class="hljs-string">&quot;20px&quot;</span>;<br></code></pre></td></tr></table></figure>

<p>这些都是改变某一些规则里面的某个样式,我们还可以新增与删除CSS的规则</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript">s.sheet.deleteRule(<span class="hljs-number">1</span>);<br>s.sheet.removeRule(<span class="hljs-number">0</span>); <span class="hljs-comment">//IE里面的操作</span><br>s.sheet.insertRule(<span class="hljs-string">&quot;.b&#123;color:red;&#125;&quot;</span>,<span class="hljs-number">2</span>);<br>s.sheet.addRule(<span class="hljs-string">&quot;.b&#123;color:red;&#125;&quot;</span>,<span class="hljs-number">2</span>); <span class="hljs-comment">//IE里面的操作</span><br></code></pre></td></tr></table></figure>

<h3 id="3-外部样式表的操作"><a href="#3-外部样式表的操作" class="headerlink" title="3.外部样式表的操作"></a>3.外部样式表的操作</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;link1&quot;</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">&quot;stylesheet&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;./css/01.css</span></span><br></code></pre></td></tr></table></figure>

<p>操作方法和上面一样直接通过id获取<code>link</code>，再打印sheet</p>
<h3 id="4-样式获取"><a href="#4-样式获取" class="headerlink" title="4.样式获取"></a>4.样式获取</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs javascript">&lt;style&gt;<br>.box&#123;<br>	<span class="hljs-attr">width</span>: 200px;<br>	height: 200px;<br>	border: 2px solid black;<br>	font-size: 32px;<br>	color: red !important;   <span class="hljs-comment">//权重 10000 大于 style</span><br>	&#125;<br>&lt;/style&gt;<br><span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;color: blue;&quot;</span>&gt;</span></span><br><span class="xml">我是一个盒子</span><br><span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span><br></code></pre></td></tr></table></figure>

<blockquote>
<p>如果我们直接通过 box.style.color 来获取样式，这个时候得到的结果是 blue ，这是不对的，元素最终 表现的结果是 red 。所以通过 元素.style 这一种方式取值是不对的，它有可能取不到，有可能取到就是错 的</p>
</blockquote>
<p><strong>我们取值一定是要取元素最终的样式</strong>，也就是经过计算以后的样式，如下图所示</p>
<p><img src="https://pic.imgdb.cn/item/6138a3e644eaada739300833.jpg" srcset="/blog/img/loading.gif" lazyload></p>
<p>在DOM操作里面，系统提供了一个方法让我们可以获取元素经过计算以后的样式，这个方法如下 </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript">css样式对象 = <span class="hljs-built_in">window</span>.getComputedStyle(元素,是否伪元素?);<br></code></pre></td></tr></table></figure>

<p>现在我们就使用这个方法去获取到上面元素的最终样式</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> box = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;.box&quot;</span>);<br><span class="hljs-keyword">var</span> cssObj = <span class="hljs-built_in">window</span>.getComputedStyle(box);<br><span class="hljs-built_in">console</span>.log(cssObj.color);<br><span class="hljs-built_in">console</span>.log(cssObj.width);<br></code></pre></td></tr></table></figure>

<p>这个方法还可以获取到<strong>伪元素</strong>的样式，如下所示</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><code class="hljs javascript">&lt;style&gt;<br>.box::after&#123;<br>	<span class="hljs-attr">content</span>: <span class="hljs-string">&quot;我是after&quot;</span>;<br>	color: lightseagreen;<br>	font-weight: bold;<br>	font-style: italic;<br>&#125;<br>&lt;/style&gt;<br>	<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;color: blue;width:250px&quot;</span>&gt;</span></span><br><span class="xml">	我是一个盒子</span><br><span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span><br><span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="javascript"><span class="xml">	<span class="hljs-keyword">var</span> box = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;.box&quot;</span>);</span></span><br><span class="javascript"><span class="xml">	<span class="hljs-keyword">var</span> cssObj = <span class="hljs-built_in">window</span>.getComputedStyle(box,<span class="hljs-string">&quot;::after&quot;</span>);</span></span><br><span class="javascript"><span class="xml">	<span class="hljs-comment">//这个时候的cssObj就是伪元素.box::after下面的样式对象</span></span></span><br><span class="javascript"><span class="xml"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></span>	<br></code></pre></td></tr></table></figure>

<blockquote>
<p>注意：我们通过 window.getComputedStyle() 所得到的样式对象只能取值，<strong>不能赋值</strong>的</p>
</blockquote>
 <h3 style="color:red">在IE中使用currentStyle属性来实现</h3>

<p>所以在写代码的时候，可能会有如下情况</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> div1 = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&quot;#div1&quot;</span>);<br><span class="hljs-comment">//W3C里面</span><br><span class="hljs-keyword">var</span> cssObj = <span class="hljs-built_in">window</span>.getComputedStyle(div1);<br><span class="hljs-built_in">console</span>.log(cssObj.width);<br><span class="hljs-comment">//在IE里面</span><br><span class="hljs-keyword">var</span> cssObj = div1.currentStyle;<br><span class="hljs-built_in">console</span>.log(cssObj.width);<br></code></pre></td></tr></table></figure>

<h2 id="6-DOM自定义属性"><a href="#6-DOM自定义属性" class="headerlink" title="6.DOM自定义属性"></a>6.DOM自定义属性</h2><h3 id="一、自定义属性介绍"><a href="#一、自定义属性介绍" class="headerlink" title="一、自定义属性介绍"></a>一、自定义属性介绍</h3><p>针对HTML里面自定义属性的情况，我们可以发现，自定义的<code>attribute</code>是不能转换为<code>property</code>的，这样操作起来非常不方便，所以后面<code>W3C</code>就推出了标准的自定义属性定义与使用方式，只需要在原来算定义的属性前面添加<code>data-</code>即可，如<code>data-age=&quot;18&quot;</code>，这么做了以后，系统在进行网页加载的时候就可以把这些自定义属性转换成<code>property</code>了</p>
<h3 id="二、自定义属性定义"><a href="#二、自定义属性定义" class="headerlink" title="二、自定义属性定义"></a>二、自定义属性定义</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;请输入内容&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;txt&quot;</span> <span class="hljs-attr">data-sex</span>=<span class="hljs-string">&quot;女&quot;</span> <span class="hljs-attr">data-hobby</span>=<span class="hljs-string">&quot;看书，睡觉&quot;</span> <span class="hljs-attr">age</span>=<span class="hljs-string">&quot;18&quot;</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><img src="https://pic.imgdb.cn/item/6139f96144eaada7393c2c6f.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210909113006972"></p>
<p>我们在当前的这个DOM对象上面找到了一个<code>dataset</code>的属性，这个属性里面包含了我们之前通过<code>data-</code>定义的所有自定义attribute</p>
<p><span style="color:red">dataset是将当前标签上面所有以<code>data-</code>开头的属性集合起来，变成一个对象</span></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">/*</span><br><span class="hljs-comment">	原来的data-sex 在 DOM对象里面就变成了dataset.sex</span><br><span class="hljs-comment">	原来的data-hobby 在 DOM对象里面变在了dataset.hobby</span><br><span class="hljs-comment">*/</span><br><br><span class="hljs-keyword">var</span> txt = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;#txt&quot;</span>);<br><span class="hljs-built_in">console</span>.log(txt.type);<br><span class="hljs-built_in">console</span>.log(txt.placeholder);<br><span class="hljs-built_in">console</span>.log(txt.age);       <span class="hljs-comment">//undefined 因为自定的attribute是不会换为property</span><br><span class="hljs-built_in">console</span>.log(txt.dataset.sex);<br><span class="hljs-built_in">console</span>.log(txt.dataset.hobby);<br></code></pre></td></tr></table></figure>

<p><strong>注意事项</strong>：在使用<code>data-</code>自定义属性的时候，不要使用驼峰命名，如果非要使用，则只能<code>data-单词1-单词2</code></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;txt&quot;</span> <span class="hljs-attr">data-sex</span>=<span class="hljs-string">&quot;女&quot;</span> <span class="hljs-attr">data-hobby</span>=<span class="hljs-string">&quot;看书&quot;</span> <span class="hljs-attr">data-userName</span>=<span class="hljs-string">&quot;杨标&quot;</span> <span class="hljs-attr">data-user-age</span>=<span class="hljs-string">&quot;18&quot;</span>&gt;</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p>在上面的代码里面，关键点在于<code>data-userName</code>和<code>data-user-age</code></p>
<p><img src="https://pic.imgdb.cn/item/613aa32a44eaada739341609.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210909113717561"></p>
</blockquote>
<p>驼峰命名转换成全小写,<code>-</code>隔开可以转换成驼峰</p>
<h3 id="三、自定义属性取值与赋值"><a href="#三、自定义属性取值与赋值" class="headerlink" title="三、自定义属性取值与赋值"></a>三、自定义属性取值与赋值</h3><p>自定义属性如果是通过<code>data-</code>开头的，它的取值方式也很简单。主要还是两种</p>
<ol>
<li><code>getAttribute()</code>来进行。这个方法在之前讲DOM的方法的时候已经讲过</li>
<li><code>dataset</code>属性来进行取值，之前已经说过，所以以<code>data-</code>开头的属性都会集中在<code>dataset</code>下面</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;txt&quot;</span> <span class="hljs-attr">data-sex</span>=<span class="hljs-string">&quot;女&quot;</span> <span class="hljs-attr">data-hobby</span>=<span class="hljs-string">&quot;看书&quot;</span> <span class="hljs-attr">data-userName</span>=<span class="hljs-string">&quot;杨标&quot;</span> <span class="hljs-attr">data-user-age</span>=<span class="hljs-string">&quot;18&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-comment">/**</span></span><br><span class="hljs-comment"><span class="javascript">     * <span class="hljs-doctag">@type <span class="hljs-type">&#123;HTMLElement&#125;</span></span></span></span><br><span class="hljs-comment"><span class="javascript">     */</span></span><br><span class="javascript">    <span class="hljs-keyword">var</span> txt = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;#txt&quot;</span>);</span><br><span class="javascript"></span><br><span class="javascript">    <span class="hljs-built_in">console</span>.log(txt.getAttribute(<span class="hljs-string">&quot;data-hobby&quot;</span>));</span><br><span class="javascript">    <span class="hljs-built_in">console</span>.log(txt.dataset.hobby);</span><br><span class="javascript"></span><br><span class="javascript">    txt.setAttribute(<span class="hljs-string">&quot;data-hobby&quot;</span>, <span class="hljs-string">&quot;打游戏&quot;</span>); <span class="hljs-comment">//也可以赋值</span></span><br><span class="javascript">    txt.dataset.hobby = <span class="hljs-string">&quot;睡觉&quot;</span>; <span class="hljs-comment">//同样也可以赋值</span></span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h3 id="四、自定义属性应用"><a href="#四、自定义属性应用" class="headerlink" title="四、自定义属性应用"></a>四、自定义属性应用</h3><p>自定义属性的应用–使用点击事件切换自定义属性</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;zh&quot;</span>&gt;</span><br><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;IE=edge&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>自定义属性的应用<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"></span><br><span class="css">        <span class="hljs-selector-class">.box</span> &#123;</span><br><span class="css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">200px</span>;</span><br><span class="css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">200px</span>;</span><br><span class="css">            <span class="hljs-attribute">border</span>: <span class="hljs-number">2px</span> solid black;</span><br><span class="css">        &#125;</span><br><span class="css"></span><br><span class="css">        <span class="hljs-selector-attr">[data-box-status=<span class="hljs-string">&quot;1&quot;</span>]</span> &#123;</span><br><span class="css">            <span class="hljs-attribute">background-color</span>: red;</span><br><span class="css">        &#125;</span><br><span class="css"></span><br><span class="css">        <span class="hljs-selector-attr">[data-box-status=<span class="hljs-string">&quot;0&quot;</span>]</span> &#123;</span><br><span class="css">            <span class="hljs-attribute">background-color</span>: blue;</span><br><span class="css">            <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">50%</span>;</span><br><span class="css">        &#125;</span><br><span class="css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-comment">&lt;!--字符串转数字 取反 再转数字--&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">data-box-status</span>=<span class="hljs-string">&quot;1&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">&quot;this.dataset.boxStatus = +!+this.dataset.boxStatus;&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>

<hr>
<h3 id="五、扩展-CSS变量操作"><a href="#五、扩展-CSS变量操作" class="headerlink" title="五、扩展-CSS变量操作"></a>五、扩展-CSS变量操作</h3><p>在之前在CSS学习里面，我们是可以在CSS当中去定义变量的，如下所示</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"></span><br><span class="css">    <span class="hljs-selector-class">.box</span> &#123;</span><br><span class="css">        <span class="hljs-attribute">background-color</span>: deeppink;</span><br><span class="css">        <span class="hljs-comment">/* 这就是CSS变量 */</span></span><br><span class="css">        --x: <span class="hljs-number">200px</span>;</span><br><span class="css">        <span class="hljs-attribute">width</span>: <span class="hljs-built_in">var</span>(--x);</span><br><span class="css">        <span class="hljs-attribute">height</span>: <span class="hljs-built_in">var</span>(--x);</span><br><span class="css">    &#125;</span><br><span class="css"></span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span>这是一个盒子<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-comment">/**</span></span><br><span class="hljs-comment"><span class="javascript">     * <span class="hljs-doctag">@type <span class="hljs-type">&#123;HTMLElement&#125;</span></span></span></span><br><span class="hljs-comment"><span class="javascript">     */</span></span><br><span class="javascript">    <span class="hljs-keyword">var</span> box = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;.box&quot;</span>);</span><br><span class="javascript">    <span class="hljs-keyword">var</span> cssObj = <span class="hljs-built_in">window</span>.getComputedStyle(box);   <span class="hljs-comment">//获取已经计算的属性</span></span><br><span class="javascript">    <span class="hljs-comment">//获取</span></span><br><span class="javascript">    <span class="hljs-keyword">var</span> x = cssObj.getPropertyValue(<span class="hljs-string">&quot;--x&quot;</span>);  <span class="hljs-comment">//获取其中变量</span></span><br><span class="javascript">    <span class="hljs-built_in">console</span>.log(x);</span><br><span class="javascript"></span><br><span class="javascript">    <span class="hljs-comment">// 设置 赋值</span></span><br><span class="javascript">    box.style.setProperty(<span class="hljs-string">&quot;--x&quot;</span>,<span class="hljs-string">&quot;100px&quot;</span>);  <span class="hljs-comment">//更改变量的值</span></span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>在上面的例子里面就很好的说明这个CSS变量的操作过程</p>
<ul>
<li>取值仍然是找<code>getComputed()</code>里面得到的CSS对象，然后调用<code>getPropertyValue()</code>来获取变量的值</li>
<li>赋值则是找<code>style</code>，然后通过<code>setProperty()</code>来实现变量的赋值</li>
</ul>
<h4 id="案例–环形进度条"><a href="#案例–环形进度条" class="headerlink" title="案例–环形进度条"></a>案例–环形进度条</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"></span><br><span class="css">    <span class="hljs-selector-class">.box</span> &#123;</span><br><span class="css">        <span class="hljs-attribute">width</span>: <span class="hljs-number">200px</span>;</span><br><span class="css">        <span class="hljs-attribute">height</span>: <span class="hljs-number">200px</span>;</span><br><span class="css">        <span class="hljs-attribute">border</span>: <span class="hljs-number">5px</span> solid black;</span><br><span class="css">        --x: <span class="hljs-number">30%</span>;</span><br><span class="css">        <span class="hljs-attribute">background-image</span>: <span class="hljs-built_in">conic-gradient</span>(red <span class="hljs-number">0%</span> <span class="hljs-built_in">var</span>(--x), white <span class="hljs-built_in">var</span>(--x) <span class="hljs-number">100%</span>);</span><br><span class="css">        <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">50%</span>;</span><br><span class="css">    &#125;</span><br><span class="css">    <span class="hljs-selector-class">.small-box</span>&#123;</span><br><span class="css">        <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;</span><br><span class="css">        <span class="hljs-attribute">height</span>: <span class="hljs-number">100%</span>;</span><br><span class="css">        <span class="hljs-attribute">background-color</span>: white;</span><br><span class="css">        <span class="hljs-attribute">transform</span>: <span class="hljs-built_in">scale</span>(<span class="hljs-number">0.9</span>);</span><br><span class="css">        <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">50%</span>;</span><br><span class="css">        <span class="hljs-attribute">font-size</span>: <span class="hljs-number">56px</span>;</span><br><span class="css">        <span class="hljs-attribute">display</span>: flex;</span><br><span class="css">        <span class="hljs-attribute">flex-direction</span>: row;</span><br><span class="css">        <span class="hljs-attribute">justify-content</span>: center;</span><br><span class="css">        <span class="hljs-attribute">align-items</span>: center;</span><br><span class="css">    &#125;</span><br><span class="css"></span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;small-box&quot;</span>&gt;</span>0%<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-comment">/**</span></span><br><span class="hljs-comment"><span class="javascript">     * <span class="hljs-doctag">@type <span class="hljs-type">&#123;HTMLElement&#125;</span></span></span></span><br><span class="hljs-comment"><span class="javascript">     */</span></span><br><span class="javascript">    <span class="hljs-keyword">var</span> box = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;.box&quot;</span>);</span><br><span class="javascript">    <span class="hljs-keyword">var</span> cssObj = <span class="hljs-built_in">window</span>.getComputedStyle(box);</span><br><span class="javascript">    <span class="hljs-keyword">var</span> smallBox = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;.small-box&quot;</span>);</span><br><span class="javascript"></span><br><span class="javascript">    <span class="hljs-built_in">setInterval</span>(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>&#123;</span><br><span class="javascript">        <span class="hljs-keyword">var</span> x = cssObj.getPropertyValue(<span class="hljs-string">&quot;--x&quot;</span>);</span><br><span class="javascript">        x = <span class="hljs-built_in">parseInt</span>(x) + <span class="hljs-number">1</span>;</span><br><span class="javascript">        <span class="hljs-keyword">if</span>(x&gt;<span class="hljs-number">100</span>)&#123;</span><br><span class="javascript">            x = <span class="hljs-number">0</span>;</span><br><span class="javascript">        &#125;</span><br><span class="javascript">        box.style.setProperty(<span class="hljs-string">&quot;--x&quot;</span>, x + <span class="hljs-string">&quot;%&quot;</span>);</span><br><span class="javascript">        smallBox.innerText =  x + <span class="hljs-string">&quot;%&quot;</span>;</span><br><span class="javascript">    &#125;, <span class="hljs-number">100</span>);</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><img src="https://pic.imgdb.cn/item/6139fc5344eaada7394183bf.gif" srcset="/blog/img/loading.gif" lazyload></p>
<h2 id="7-元素大小"><a href="#7-元素大小" class="headerlink" title="7.元素大小"></a>7.元素大小</h2><p>在DOM操作的时候，我们已经可以通过<code>getComputedStyle</code>来获取元素的样式信息，从而去通过这个CSS对象去获取元素里面的样式中的<code>width</code>与<code>height</code>属性来获取元素的大小，如下</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"></span><br><span class="css">    <span class="hljs-selector-class">.box</span> &#123;</span><br><span class="css">        <span class="hljs-attribute">width</span>: <span class="hljs-number">200px</span>;</span><br><span class="css">        <span class="hljs-attribute">height</span>: <span class="hljs-number">200px</span>;</span><br><span class="css">        <span class="hljs-attribute">border</span>: <span class="hljs-number">5px</span> solid black;</span><br><span class="css">        <span class="hljs-attribute">padding</span>: <span class="hljs-number">10px</span>;</span><br><span class="css">        <span class="hljs-attribute">background-color</span>: deeppink;</span><br><span class="css">    &#125;</span><br><span class="css"></span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">var</span> box = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;.box&quot;</span>);</span><br><span class="javascript">    <span class="hljs-keyword">var</span> cssObj = <span class="hljs-built_in">window</span>.getComputedStyle(box);</span><br><span class="javascript">    <span class="hljs-built_in">console</span>.log(cssObj.width);			<span class="hljs-comment">//200px</span></span><br><span class="javascript">    <span class="hljs-built_in">console</span>.log(cssObj.height);			<span class="hljs-comment">//200px</span></span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>这个时候我们获取的只是元素的样式里面的大小，但是元素还有其它的大小。我们现在来分析一下它们</p>
<h3 id="偏移量"><a href="#偏移量" class="headerlink" title="偏移量"></a>偏移量</h3><p>要了解这个知识点，我们先来看下面的图形</p>
<img src="https://gitee.com/lovesnsfi_admin/images4mk/raw/master/imgs/image-20200810204954034.png" srcset="/blog/img/loading.gif" lazyload alt="image-20200810204954034" style="zoom:67%;" />

<ul>
<li><code>offsetHeight</code>：元素在垂直方向上占用的空间大小，以像素计，包括元素的高度、内边距、水平滚动条的高度，上下边框的高度</li>
<li><code>offsetWidth</code>：元素在水平方向上占用的空间大小，以像素计，包括元素的宽度、内边距 4、垂直滚动条的宽度、左右边框的宽度</li>
<li><code>offsetLeft</code>：元素的左外边框至包含元素（offsetParent）的左内边框之间的像素距离</li>
<li><code>offsetTop</code>：元素的上外边框至包含元素的（offsetParent）上内边框之间的像素距离。</li>
</ul>
<blockquote>
<p>所有这些偏移量属性都是只读的，而且每次访问它们都需要重新计算</p>
<p><code>offsetLeft</code>与<code>offsetTop</code>指的是自己距离<code>offsetParent</code>的距离，默认情况下元素的<code>offsetParent</code>指的是<code>body</code></p>
<p>如果是“子绝父相”的定位，则子级元素的<code>offsetParent</code>是父级元素的<code>relative</code>元素</p>
<p>固定定位的元素它的<code>offsetParent</code> 是<code>null</code></p>
</blockquote>
<h3 id="客户区大小"><a href="#客户区大小" class="headerlink" title="客户区大小"></a>客户区大小</h3><p>元素的客户区大小（client dimension），指的是元素内容及其内边距所占据的空间大小，具体请看下面的图**(不计算边框)**</p>
<img src="https://gitee.com/lovesnsfi_admin/images4mk/raw/master/imgs/image-20200810205340268.png" srcset="/blog/img/loading.gif" lazyload alt="image-20200810205340268" style="zoom:80%;" />

<ul>
<li><code>clientWidth</code>：元素内容区宽度加上左右内边距宽度</li>
<li><code>clientHeight</code>：元素内容区高度加上上下内边距高度</li>
</ul>
<blockquote>
<p>客户区大小也是只读的，也是每次访问都要重新计算的。</p>
</blockquote>
<h3 id="滚动大小"><a href="#滚动大小" class="headerlink" title="滚动大小"></a>滚动大小</h3><p>scroll是滚动大小（scroll dimension），指的是包含滚动内容的元素的大小。有些元素（例如<code>&lt;html&gt;</code>元素），即使没有执行任何代码也能自动地添加滚动条；但另外一些元素，则需要通过 CSS 的overflow 属性进行设置才能滚动。</p>
<img src="https://gitee.com/lovesnsfi_admin/images4mk/raw/master/imgs/image-20200810205625711.png" srcset="/blog/img/loading.gif" lazyload alt="image-20200810205625711" style="zoom:80%;" />

<ul>
<li><code>scrollHeight</code>：在没有滚动条的情况下，元素内容的总高度。</li>
<li><code>scrollWidth</code>：在没有滚动条的情况下，元素内容的总宽度。</li>
<li><code>scrollLeft</code>：被隐藏在内容区域左侧的像素数。<u>通过设置这个属性可以改变元素的滚动位置</u>。</li>
<li><code>scrollTop</code>：被隐藏在内容区域上方的像素数。<u>通过设置这个属性可以改变元素的滚动位置</u>。</li>
</ul>
<h3 id="综合案例–点击滚动跳转位置"><a href="#综合案例–点击滚动跳转位置" class="headerlink" title="综合案例–点击滚动跳转位置"></a>综合案例–点击滚动跳转位置</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"></span><br><span class="css">    <span class="hljs-selector-class">.box</span> &#123;</span><br><span class="css">        <span class="hljs-attribute">width</span>: <span class="hljs-number">200px</span>;</span><br><span class="css">        <span class="hljs-attribute">height</span>: <span class="hljs-number">200px</span>;</span><br><span class="css">        <span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid black;</span><br><span class="css">        <span class="hljs-attribute">overflow</span>: auto;</span><br><span class="css">        <span class="hljs-attribute">position</span>: relative;</span><br><span class="css">    &#125;</span><br><span class="css"></span><br><span class="css">    <span class="hljs-selector-class">.ul1</span> &#123;</span><br><span class="css">        <span class="hljs-attribute">list-style-type</span>: none;</span><br><span class="css">        <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span>;</span><br><span class="css">        <span class="hljs-attribute">padding</span>: <span class="hljs-number">0</span>;</span><br><span class="css">        <span class="hljs-attribute">position</span>: absolute;</span><br><span class="css">    &#125;</span><br><span class="css"></span><br><span class="css">    <span class="hljs-selector-class">.ul1</span>&gt;<span class="hljs-selector-tag">li</span> &#123;</span><br><span class="css">        <span class="hljs-attribute">height</span>: <span class="hljs-number">35px</span>;</span><br><span class="css">        <span class="hljs-attribute">line-height</span>: <span class="hljs-number">35px</span>;</span><br><span class="css">        <span class="hljs-attribute">border-bottom</span>: <span class="hljs-number">1px</span> solid black;</span><br><span class="css">        <span class="hljs-attribute">box-sizing</span>: border-box;</span><br><span class="css">    &#125;</span><br><span class="css"></span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;ul1&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第1项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第2项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第3项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第4项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第5项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第6项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第7项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第8项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第9项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第10项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第11项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第12项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第13项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第14项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第15项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第16项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第17项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第18项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第19项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第20项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;btn1&quot;</span>&gt;</span>回到顶部<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;btn10&quot;</span>&gt;</span>回到第10项<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">var</span> box = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;.box&quot;</span>);</span><br><span class="javascript">    <span class="hljs-keyword">var</span> ul1 = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;.ul1&quot;</span>);</span><br><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">var</span> btn1 = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;#btn1&quot;</span>);</span><br><span class="javascript">    btn1.addEventListener(<span class="hljs-string">&quot;click&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">event</span>) </span>&#123;</span><br><span class="javascript">        box.scrollTop = <span class="hljs-number">0</span>;</span><br><span class="javascript">    &#125;);</span><br><span class="javascript"></span><br><span class="javascript">    <span class="hljs-keyword">var</span> btn10 = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&quot;#btn10&quot;</span>);</span><br><span class="javascript">    btn10.addEventListener(<span class="hljs-string">&quot;click&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">event</span>) </span>&#123;</span><br><span class="javascript">        box.scrollTop = ul1.children[<span class="hljs-number">9</span>].offsetTop;</span><br><span class="javascript">    &#125;)</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><strong>效果</strong></p>
<img src="https://pic.imgdb.cn/item/613aa39244eaada73934751c.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210909100819107" style="zoom:75%;" />

            </div>
            <hr>
            <div>
              <div class="post-metas mb-3">
                
                  <div class="post-meta mr-3">
                    <i class="iconfont icon-category"></i>
                    
                      <a class="hover-with-bg" href="/blog/categories/%E5%89%8D%E7%AB%AF%E7%AC%94%E8%AE%B0/">前端笔记</a>
                    
                  </div>
                
                
                  <div class="post-meta">
                    <i class="iconfont icon-tags"></i>
                    
                      <a class="hover-with-bg" href="/blog/tags/JavaScript/">JavaScript</a>
                    
                  </div>
                
              </div>
              
                <p class="note note-warning">
                  
                    本博客所有文章除特别声明外，均采用 <a target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/deed.zh" rel="nofollow noopener noopener">CC BY-SA 4.0 协议</a> ，转载请注明出处！
                  
                </p>
              
              
                <div class="post-prevnext">
                  <article class="post-prev col-6">
                    
                    
                      <a href="/blog/2021/09/29/JavaScript%E7%AC%94%E8%AE%B0-BOM/">
                        <i class="iconfont icon-arrowleft"></i>
                        <span class="hidden-mobile">JavaScript笔记-BOM</span>
                        <span class="visible-mobile">上一篇</span>
                      </a>
                    
                  </article>
                  <article class="post-next col-6">
                    
                    
                      <a href="/blog/2021/09/27/JavaScript%E7%AC%94%E8%AE%B0-3/">
                        <span class="hidden-mobile">JavaScript笔记-3</span>
                        <span class="visible-mobile">下一篇</span>
                        <i class="iconfont icon-arrowright"></i>
                      </a>
                    
                  </article>
                </div>
              
            </div>

            
          </article>
        </div>
      </div>
    </div>
    
      <div class="d-none d-lg-block col-lg-2 toc-container" id="toc-ctn">
        <div id="toc">
  <p class="toc-header"><i class="iconfont icon-list"></i>&nbsp;目录</p>
  <div class="toc-body" id="toc-body"></div>
</div>

      </div>
    
  </div>
</div>

<!-- Custom -->


    

    
      <a id="scroll-top-button" href="#" role="button">
        <i class="iconfont icon-arrowup" aria-hidden="true"></i>
      </a>
    

    
      <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v"
                 for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>
    

    
  </main>

  <footer class="text-center mt-5 py-3">
  <div class="footer-content">
     <a href="https://hexo.io" target="_blank" rel="nofollow noopener"><span>Hexo</span></a> <i class="iconfont icon-love"></i> <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"><span>Fluid</span></a> 
  </div>
  

  

  
</footer>


  <!-- SCRIPTS -->
  
  <script  src="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.js" ></script>
  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.css" />

  <script>
    NProgress.configure({"showSpinner":false,"trickleSpeed":100})
    NProgress.start()
    window.addEventListener('load', function() {
      NProgress.done();
    })
  </script>


<script  src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js" ></script>
<script  src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" ></script>
<script  src="/blog/js/events.js" ></script>
<script  src="/blog/js/plugins.js" ></script>

<!-- Plugins -->


  
    <script  src="/blog/js/img-lazyload.js" ></script>
  



  



  <script  src="https://cdn.jsdelivr.net/npm/tocbot@4.12.3/dist/tocbot.min.js" ></script>



  <script  src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js" ></script>



  <script  src="https://cdn.jsdelivr.net/npm/anchor-js@4.3.1/anchor.min.js" ></script>



  <script defer src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js" ></script>



  <script  src="/blog/js/local-search.js" ></script>






  <script  src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12/lib/typed.min.js" ></script>
  <script>
    (function (window, document) {
      var typing = Fluid.plugins.typing;
      var title = document.getElementById('subtitle').title;
      
      typing(title)
      
    })(window, document);
  </script>









  <script  src="https://cdn.jsdelivr.net/npm/mermaid@8.10.1/dist/mermaid.min.js" ></script>
  <script>
    if (window.mermaid) {
      mermaid.initialize({"theme":"default"});
    }
  </script>







<!-- 主题的启动项 保持在最底部 -->
<script  src="/blog/js/boot.js" ></script>


</body>
</html>
